JavaScript 操作 DOM元素CSS 样式的几种方法
JavaScript 操作 DOM元素CSS 样式的几种方法
- 直接通过元素的 style 属性来设置内联样式。
// 获取元素
const element = document.getElementById('myElement');// 设置单个样式属性
element.style.color = 'red';
element.style.fontSize = '20px';// 设置多个样式属性
element.style.cssText = 'color: blue; font-size: 25px;';
注意：使用 cssText 时要注意，它会覆盖所有现有的内联样式。如果需要保留某些样式，必须手动将它们包含在 cssText 中。
2.使用 className 和 classList 操作类名，通过添加、移除或切换类名来改变元素的样式
// 获取元素
const element = document.getElementById('myElement');// 添加类名
element.classList.add('myClass');// 移除类名
element.classList.remove('myClass');// 切换类名
element.classList.toggle('myClass');// 检查是否包含某个类名
const hasClass = element.classList.contains('myClass');
3.通过修改元素的 style 属性对象动态地设置样式
// 获取元素
const element = document.getElementById('myElement');// 动态设置样式
element.style.setProperty('color', 'green');
element.style.setProperty('font-size', '30px');// 移除样式
element.style.removeProperty('color');