持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

有两种设置元素样式的方式：

1. 在css中创建类，并添加它：<div class="...">
2. 将属性直接写入style： <div style="...">

className

由于JavaScript中不能将像‘class’这样的保留字用作对象属性，因此，对于类引入了看起来类似的属性“className”，element.className对应HTML中的class属性。对element.className进行赋值，将替换类中的整个字符串。

有时，我们希望添加或删除单个类，则需要用到ele.classList。ele.classList是一个特殊的对象，具有add/remove/toggle/contains等方法。

classList

向元素中添加类 element.classList.add(className)

const element = document.querySelector("div");
//添加单个元素
element.classList.add("active");
//添加多个元素
element.classList.add("active", "highlighted", "darkMode");

从元素中删除类 element.classList.remove(className)

const element = document.querySelector("div");
//删除单个元素
element.classList.remove("active");
//删除多个元素
element.classList.remove("active", "highlighted", "darkMode");

检查元素是否具有某个类element.classList.contains(className)，返回值为布尔值。

const element = document.querySelector("div");
element.classList.contains("active"); // true
element.classList.contains("highlighted"); // false

添加一个新类或删除现有类element.classList.toggle(className)

const box = document.querySelector("div");
box.classList.toggle("active"); // 添加类 active，因为 active 类不存在
box.classList.toggle("active"); // 删除类 active，因为 active 存在
box.classList.toggle("active"); // 添加类actvie,因为 active 类不存在

替换类名 element.classList.replace(oldClassName, newClassName)

element.classList.replace("show", "hidden");

style

JavaScript修改style。style属性可以用于更新元素上的任何CSS属性，CSS属性名需要重kebab-case转换为camelCase。例如设置背景颜色属性名需要从background-color改为backgroundColor。

const banner = document.querySelector("#banner");
// 隐藏元素
banner.style.display = "none";
// 显示元素
banner.style.display = ""; //或者设置为 "initial"

总结

更改元素样式有以下三种方式：

• element.className将替换类的整个字符串。
• element.classList可以添加、删除、切换、替换、是否包含类操作。 add/remove/toggle/contains/replace
• element.style可以更改元素上的任何css属性，但是style访问属性要改为camelCase。