我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
我也认为最快的方法是使用Element.prototype.classList,如es5:document.querySelector(“.my.superclass”).classList.add('new-class')但是在ie8中没有Element.prototype.classList这样的东西,无论如何,您可以用以下代码段来填充它(可以自由编辑和改进它):
if(Element.prototype.classList==void 0){函数DOMTokenList(类,自身){typeof classes==“string”&&(classes=classes.split(“”))while(此长度){Array.protocol.pop.apply(this);}数组.原型.推送.应用(this,类);这一点__self__=这个__自我__||自我}DOMTokenList.prototype.item=函数(索引){返回此[索引];}DOMTokenList.prototype.contains=函数(myClass){对于(var i=this.length-1;i>=0;i-){如果(this[i]==myClass){返回true;}}return false}DOMTokenList.prototype.add=函数(newClass){if(this.contains(newClass)){回来}这一点__self__.className+=(this.__self__.calassName?“”:“”)+newClass;DOMTokenList.call(this,this.__self__.className)}DOMTokenList.prototype.remove=函数(旧类){if(!this.contains(newClass)){回来}this[this.indexOf(oldClass)]=未定义这一点__self__.className=this.join('').replace(/+/,'')DOMTokenList.call(this,this.__self__.className)}DOMTokenList.prototype.toggle=函数(aClass){this[this.contains(aClass)?'remove':'add'](aClass)返回this。contains(aClass);}DOMTokenList.prototype.replace=函数(旧类,新类){this.contains(oldClass)&&this.remove(oldClass)&&this.add(newClass)}Object.defineProperty(Element.prototype,'classList'{获取:函数(){返回新的DOMTokenList(this.className,this);},可枚举:false})}
其他回答
在YUI中,如果包含yuidom,则可以使用
YAHOO.util.Dom.addClass('div1','className');
HTH
如果您只针对现代浏览器:
使用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。
要以简单的方式添加、删除或检查元素类,请执行以下操作:
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');
对于使用Lodash并希望更新className字符串的用户:
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()
为了详细说明其他人所说的,多个CSS类组合在一个字符串中,由空格分隔。因此,如果您想对其进行硬编码,它只需如下所示:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里,您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格,后跟新类。知道了这一点,您还可以编写一个函数,以便以后在需要时删除类。