JavaScript 参考手册 目录

HTML DOM className 属性

在 Web 前端开发中,经常会涉及到操作和修改 HTML 元素的 class 属性,以便实现样式的改变和交互效果的展示。在 HTML DOM 中,我们可以通过 className 属性来获取和设置元素的 class 属性。

获取元素的 class 名称

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

--------- -----
------
------

---- ---------------- ------------ ------------

--------
    --- ------- - -------------------------------------
    ------------------------------- -- -- ---------- -----
---------

-------
-------

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

设置元素的 class 名称

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

--------- -----
------
------

---- ----------------- ----------------- ------------

--------
    --- ------- - ---------------------------------
    ----------------- - ---------- ------ -- ---- ----- --

    ------------------------------- -- -- ---------- -----

    -------------------------------- -- ------ ----- --
    ------------------------------- -- -- ---------- ---- -------

    --------------------------------- -- ---- ----- --
    ------------------------------- -- -- ---------- -------

    --------------------------------- -- ----- ---- --------------
    ------------------------------- -- -- ---------- ------ -----
---------

-------
-------

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

总结

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


下一篇:概览