WebAPI-修改元素样式的方法汇总

设置/修改元素样式 1

方式一

通过元素的 style 属性来设置样式；元素对象的 style 属性也是一个对象，可以通过 . 的方式来设置或修改样式。

语法：

元素对象.style.样式属性 = 属性值

注意：

• 通过该方式操作样式时，样式属性要使用驼峰命名法。

• 通过该方式产生的样式是行内样式，权重比较高。

<div>div标签</div>

// 获取元素
let el = document.querySelector('div');
// 设置样式
el.style.fontSize = '24px';
el.style.color = 'red';

// 控制台打印元素
console.log(el);

方式二

通过操作 className 属性来修改元素的类名，达到修改样式的目的。因为元素的 class 属性在 js 中是一个关键字，所以使用 className。

语法：

元素对象.className = 值

注意：

• 通过 className 的方式会直接覆盖原先的类名。

示例：

<div class="box">div标签</div>

.active {
  color: red;
  font-size: 24px;
  background-color: skyblue;
}

// 获取元素
let el = document.querySelector('.box');
// 打印修改 class 之前的元素对象
console.log(el);
// 修改元素的 class
el.className = 'active';

设置/修改元素样式 2

classList 属性是 HTML5 新增的一个属性，可返回元素的类名。通过该属性的方法可解决 className 覆盖元素原类名的问题。

追加一个类

语法：

元素对象.classList.add('类名');

示例：

// 获取元素
let el = document.querySelector('.box');
// 添加一个类
el.classList.add('active');
console.log(el);

移除一个类

语法：

元素对象.classList.remove('类名');

示例：

<div class="box one active">div标签</div>

// 获取元素
let el = document.querySelector('.box');
// 移除一个类
el.classList.remove('box');
console.log(el);

切换一个类

元素对象如果有这个类就删除，没有就添加。

语法：

元素对象.classList.toggle('类名');