一、改变元素内容
- 使用
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;');