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

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

目标：
使用附加类增强 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中文网其他相关文章！