js怎样改变元素的内容、属性、样式？
一、改变元素内容
- 使用
textContent属性：textContent可以设置或获取元素及其后代的文本内容。- 例如
const element = document.getElementById('myElement');element.textContent = 'New text content';
- 使用
innerHTML属性：innerHTML可以设置或获取元素的 HTML 内容。- 例如：
const element = document.getElementById('myElement');element.innerHTML = '<p>New HTML content</p>';
二、改变元素属性
- 使用
setAttribute方法：- 可以通过这个方法设置元素的特定属性。
- 例如，设置一个元素的
src属性：
const img = document.getElementById('myImage');img.setAttribute('src', 'new-image.jpg');
- 直接访问属性：
- 可以直接通过元素对象的属性名来设置属性值。
- 例如：
const input = document.getElementById('myInput');input.value = 'New input value';
三、改变元素样式
- 使用
style属性：- 可以直接通过元素对象的
style属性来设置 CSS 样式。 - 例如：
- 可以直接通过元素对象的
const element = document.getElementById('myElement');element.style.color = 'red';element.style.backgroundColor = 'blue';
- 使用
classList属性：classList可以操作元素的类名，方便地添加、移除或切换类。- 例如：
const element = document.getElementById('myElement');element.classList.add('new-class');element.classList.remove('old-class');element.classList.toggle('active-class');
- 然后在 CSS 中定义相应的类来设置样式
- 使用
setAttribute设置style属性：- 可以通过
setAttribute方法设置style属性的整个字符串值。 - 例如：
- 可以通过
const element = document.getElementById('myElement');element.setAttribute('style', 'color: red; background-color: blue;');