如何使用 JavaScript 在 HTML 元素中添加或删除类？

使用 JavaScript 将类添加到元素

使用 HTML 元素时，通常需要使用 JavaScript 动态添加或删除类。例如，假设您有一个具有以下 HTML 的元素：

<div class="someclass">
    <img ...>

并且您想要创建一个 JavaScript 函数，将另一个类添加到上面的 div 元素。

现代浏览器

如果您仅针对支持 Element.classList 属性的现代浏览器，解决方案很简单。只需使用 classList.add() 方法向元素添加新类：

element.classList.add("my-class");

要删除类，请使用 classList.remove() 方法：

element.classList.remove("my-class");

Internet Explorer 9 及更低版本

对于 Internet Explorer 9 或更低版本等旧版浏览器，不支持除了 classList 属性之外，您还可以使用 className 属性。首先，为元素分配一个 ID，以便于检索：

<div>

然后，将新类名称与现有类名称连接起来，确保它们之间添加一个空格：

var d = document.getElementById("div1");
d.className += " otherclass";

记住在新类名前添加空格，以避免与类列表中现有的类冲突。

通过遵循这些方法，您可以动态添加或使用 JavaScript 从任何 HTML 元素中删除类，从而提供对网页样式的灵活性和控制。

以上是如何使用 JavaScript 在 HTML 元素中添加或删除类？的详细内容。更多信息请关注PHP中文网其他相关文章！