HTML DOM className 属性

获取元素的 class 名称

要获取一个元素的 class 名称，我们可以使用 className 属性。这个属性返回一个字符串，其中包含了元素的所有 class 名称，以空格分隔。例如：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<div class="container main">Hello, World!</div>

<script>
    var element = document.querySelector('.container');
    console.log(element.className); // 输出 "container main"
</script>

</body>
</html>

在上面的示例中，我们首先通过 document.querySelector 方法选中了一个 class 名称为 "container" 的元素，然后通过 className 属性获取了该元素的 class 名称，并将其打印在控制台上。

设置元素的 class 名称

除了获取元素的 class 名称外，我们还可以通过 className 属性来设置元素的 class 名称。我们可以直接将新的 class 名称赋值给 className 属性，或者使用 classList 对象提供的方法来添加、移除或切换 class 名称。示例如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<div class="container" id="myDiv">Hello, World!</div>

<script>
    var element = document.getElementById('myDiv');
    element.className = 'container main'; // 设置新的 class 名称

    console.log(element.className); // 输出 "container main"

    element.classList.add('active'); // 添加一个新的 class 名称
    console.log(element.className); // 输出 "container main active"

    element.classList.remove('main'); // 移除一个 class 名称
    console.log(element.className); // 输出 "container active"

    element.classList.toggle('dark'); // 如果不存在 dark 类名，则添加，如果存在则移除
    console.log(element.className); // 输出 "container active dark"
</script>

</body>
</html>

在上面的示例中，我们首先通过 document.getElementById 方法选中了一个 id 为 "myDiv" 的元素，然后通过不同的方式设置了元素的 class 名称，并观察了 className 属性的变化。

总结

通过 HTML DOM 的 className 属性，我们可以轻松地获取和设置元素的 class 名称，从而实现对元素样式的控制和修改。同时，结合 classList 对象提供的方法，我们还可以更加灵活地操作元素的 class 名称。希望本文对你有所帮助，谢谢阅读！