我有一个已经有一个类的元素：
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在，我想创建一个 JavaScript 函数，它将向div（不是替换，而是添加）添加一个类。
我怎样才能做到这一点？
如何向给定元素添加类？
IT技术
javascript
dom-manipulation
2021-02-07 03:59:23
6个回答
如果您只针对现代浏览器：
使用element.classList.add添加一个类：
element.classList.add("my-class");
和element.classList.remove删除一个类：
element.classList.remove("my-class");
如果您需要支持 Internet Explorer 9 或更低版本：
className在元素的属性中添加一个空格加上新类的名称。首先，将 anid放在元素上，以便您可以轻松获得参考。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
然后
var d = document.getElementById("div1");
d.className += " otherclass";
注意前面的空格otherclass。包含空格很重要，否则它会损害类列表中位于它之前的现有类。
在没有任何框架的情况下执行此操作的最简单方法是使用element.classList.add方法。
var element = document.getElementById("div1");
element.classList.add("otherclass");
编辑： 如果你想从元素中删除类 -
element.classList.remove("otherclass");
我不想自己添加任何空白区域和重复条目处理（使用该document.className方法时需要这样做）。有一些浏览器限制，但您可以使用polyfills解决它们。
找到你想要的目标元素“d”，然后：
d.className += ' additionalClass'; //note the space
你可以用更聪明的方式包装它来检查预先存在，并检查空间要求等。
添加class
交叉兼容
在下面的示例中，我们将 a 添加
classname到<body>元素。这是 IE-8 兼容的。var a = document.body; a.classList ? a.classList.add('classname') : a.className += ' classname';这是以下内容的简写..
var a = document.body; if (a.classList) { a.classList.add('wait'); } else { a.className += ' wait'; }
表现
如果您更关心性能而不是交叉兼容性，您可以将其缩短为以下 4% 的速度。
var z = document.body; document.body.classList.add('wait');
方便
或者，您可以使用 jQuery，但结果性能明显变慢。根据 jsPerf 慢 94%
$('body').addClass('wait');
删除类
表现
如果您关心性能，则有选择地使用 jQuery 是删除类的最佳方法
var a = document.body, c = ' classname'; $(a).removeClass(c);
没有 jQuery，它会慢 32%
var a = document.body, c = ' classname'; a.className = a.className.replace( c, '' ); a.className = a.className + c;
参考
使用原型
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
使用 YUI
YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
使用纯 JavaScript 将类添加到元素的另一种方法
添加类：
document.getElementById("div1").classList.add("classToBeAdded");
对于删除类：
document.getElementById("div1").classList.remove("classToBeRemoved");
其它你可能感兴趣的问题