当前位置：首页 > article >正文

JavaScript 操作 DOM元素CSS 样式的几种方法

article 2024/11/20 1:44:23

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');