如何向 HTML 元素添加新类而不覆盖现有类？-js教程-PHP中文网

如何向 HTML 元素添加新类而不覆盖现有类？

Linda Hamilton

发布： 2024-12-10 19:59:09

原创

882 人浏览过

How to Add a New Class to an HTML Element Without Overwriting Existing Classes?

如何向现有元素添加附加类

目标：
使用附加类增强 HTML 元素

场景：
给定一个具有现有类的元素，我们的目标是添加一个新类而不覆盖原始类。

解决方案:

利用通过 classList 属性，您可以轻松地向元素添加类：

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

登录后复制

类似地，要删除类：

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

登录后复制

为了满足对于 Internet Explorer 9 等较旧的浏览器，请通过在新类名称后附加一个空格来修改元素的 className 属性。作为先决条件，为元素分配一个 id 以便于访问：

<div>

登录后复制

然后，使用 JavaScript：

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

登录后复制

记住在“otherclass”之前包含一个前导空格以保留现有的类限定符。

请参阅 Mozilla 开发者网络(MDN) 有关 element.className 的综合文档。

以上是如何向 HTML 元素添加新类而不覆盖现有类？的详细内容。更多信息请关注PHP中文网其他相关文章！