我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
在YUI中,如果包含yuidom,则可以使用
YAHOO.util.Dom.addClass('div1','className');
HTH
其他回答
首先,给div一个id。然后,调用函数appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>
要以简单的方式添加、删除或检查元素类,请执行以下操作:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
使用纯JavaScript将类添加到元素的另一种方法
对于添加类:
document.getElementById("div1").classList.add("classToBeAdded");
要删除类:
document.getElementById("div1").classList.remove("classToBeRemoved");
添加类
交叉兼容在下面的示例中,我们向<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")
我认为最好使用纯JavaScript,它可以在浏览器的DOM上运行。
这里是使用它的函数方法。我使用过ES6,但可以随意使用ES5和函数表达式或函数定义,无论哪种都适合您的JavaScript StyleGuide。
'使用严格'const oldAdd=(元素,className)=>{let classes=element.className.split(“”)if(classes.indexOf(className)<0){classs.push(className)}element.className=classes.join(“”)}const oldRemove=(元素,className)=>{let classes=element.className.split(“”)const idx=classes.indexOf(className)如果(idx>-1){类.拼接(idx,1)}element.className=classes.join(“”)}const addClass=(元素,className)=>{if(element.classList){element.classList.add(className)}其他{oldAdd(元素,className)}}const removeClass=(元素,className)=>{if(element.classList){element.classList.remove(className)}其他{oldRemove(元素,className)}}