我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
如果您只针对现代浏览器:
使用element.classList.add添加类:
element.classList.add("my-class");
和element.classList.remove删除类:
element.classList.remove("my-class");
如果您需要支持Internet Explorer 9或更低版本:
在元素的className属性中添加一个空格加上新类的名称。首先,在元素上放置一个id,这样就可以轻松地获得引用。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
然后
var d = document.getElementById("div1");
d.className += " otherclass";
注意其他类之前的空格。包含空间很重要,否则它会损害类列表中前面的现有类。
另请参见MDN上的element.className。
其他回答
使用纯JavaScript将类添加到元素的另一种方法
对于添加类:
document.getElementById("div1").classList.add("classToBeAdded");
要删除类:
document.getElementById("div1").classList.remove("classToBeRemoved");
document.getElementById('some_id').className+=' someclassname'
OR:
document.getElementById('some_id').classList.add('someclassname')
当第二种方法不起作用时,第一种方法有助于添加类。在第一种方法中,不要忘记在“someclassname”前面留一个空格。
对于删除,您可以使用:
document.getElementById('some_id').classList.remove('someclassname')
为了详细说明其他人所说的,多个CSS类组合在一个字符串中,由空格分隔。因此,如果您想对其进行硬编码,它只需如下所示:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里,您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格,后跟新类。知道了这一点,您还可以编写一个函数,以便以后在需要时删除类。
添加类
交叉兼容在下面的示例中,我们向<body>元素添加类名。这与IE-8兼容。var a=文档正文;a.classList?a.classList.add('classname'):a.classname+='classname';这是以下内容的简写。。var a=文档正文;if(a.classList){a.classList.add('wait');}其他{a.className+=“等待”;}
表演如果您更关心性能而不是交叉兼容性,可以将其缩短为以下值,即速度提高4%。var z=文档正文;document.body.classList.add('wait');
方便或者,您可以使用jQuery,但结果的性能会明显降低。根据jsPerf,速度降低了94%$('body').addClass('wait');
正在删除类
表演如果您关注性能,那么有选择地使用jQuery是删除类的最佳方法var a=document.body,c=“类名”;$(a).removeClass(c);
没有jQuery,速度会慢32%var a=document.body,c=“类名”;a.className=a.className.replace(c,“”);a.className=a.className+c;
工具书类
jsPerf测试用例:添加类jsPerf测试用例:删除类
使用原型
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")
要向元素添加其他类,请执行以下操作:
要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:
document.getElementById("MyElement").className += " MyClass";
要更改元素的所有类,请执行以下操作:
要用一个或多个新类替换所有现有类,请设置className属性:
document.getElementById("MyElement").className = "MyClass";
(可以使用空格分隔的列表来应用多个类。)