我有一个元素已经有了一个类。
``html
现在我想创建一个JavaScript函数,为div
添加一个类(不是替换,而是添加)。
我怎样才能做到这一点呢?
在元素的 "className "属性中添加一个空格和你的新类的名称。首先,在元素上放一个`id',这样你就可以很容易地得到一个引用。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
然后
var d = document.getElementById("div1");
d.className += " otherclass";
注意otherclass
前的空格。包括这个空格是很重要的,否则会影响到类列表中排在它前面的现有类。
参见[element.className on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)。
在没有任何框架的情况下,最简单的方法是使用[Element.classList.add][1]方法。
var element = document.getElementById("div1");
element.classList.add("otherclass");
编辑: 如果你想从一个元素中删除类----。
element.classList.remove("otherclass");
我更喜欢不用自己添加任何空位和重复的条目处理(使用document.className
方法时需要)。
有一些[浏览器限制][2],但你可以使用[polyfills][3]来解决这些问题。
[1]: https://developer.mozilla.org/en-US/docs/DOM/element.classList [2]: http://caniuse.com/#feat=classlist [3]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-classlist
在下面的例子中,我们在<body>
元素中添加了一个classname
。
这与IE-8兼容。
var a = document.body.classList ? a.classList ? a.classList.add('classname') 。 a.className += ' classname'。
这是对以下内容的速记。
var a = document.body.className += ' classname'; 这是对以下内容的简写。 如果 (a.classList) { a.classList.add('wait'); } else { a.className += ' wait'; }
如果你更关注性能而不是交叉兼容,你可以将其缩短为以下,这样会快4%。
var z = document.body.classList.add('wait');。 document.body.classList.add('wait');
或者你也可以使用jQuery,但这样做的结果是非常慢的。 根据jsPerf,慢了94%。
$('body').addClass('wait');
如果你担心性能问题,选择性地使用jQuery是删除类的最佳方法。
var a = document.body, c = ' classname'; $(a).removeClass(c);
var a = document.body, c = ' classname'。 a.className = a.className.replace( c, '' ); a.className = a.className + c。
jsPerf测试案例。 删除一个类](http://jsperf.com/removeclass99)
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
当我所做的工作不需要使用库时,我会使用这两个函数。
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}
要在元素中添加一个类,而不删除/影响现有的值,请在新的类名后面加上一个空格,就像这样:{{5517659}}}。
document.getElementById("MyElement").className += " MyClass";
要用一个或多个新的类替换所有现有的类,请设置className属性。
document.getElementById("MyElement").className = "MyClass";
(你可以使用一个空间限定的列表来应用多个类。)
我知道IE9已经正式关闭了,我们可以像上面很多人说的那样,用元素.类列表
来实现,但是我只是想学习一下没有类列表
的工作原理,在上面很多答案的帮助下,我可以学习一下。
下面的代码扩展了上面的许多答案,并通过避免添加重复的类来改进它们。
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
只是想详细说明一下其他人所说的,多个CSS类被组合在一个字符串中,用空格分隔。 因此,如果你想硬编码,它看起来就像这样。
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里你可以很容易地推导出添加新类所需的javascript......。 只需在元素的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');
你可以使用类似jQuery的现代方法
如果你只需要改变一个元素,即JS在DOM中找到的第一个元素,你可以使用这个。
<!--开始代码段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->
document.querySelector('.someclass').className += " red";
.red {
color: red;
}
<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<!--结束片段-->
请注意在**类名前留一个空格。
如果你有多个类,你想添加新的类,你可以这样使用
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});
.red {
color: red;
}
<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<!--结束片段-->
我也觉得最快的方法是使用Element.prototype.classList,就像es5一样。
document.querySelector(".my.super-class").classList.add('new-class')
。
但在ie8中并没有Element.prototype.classList这样的东西,无论如何你可以用这个代码段来填充它(可以自由编辑和改进它)。
false -->
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}
<!--结束片段-->
我认为最好使用纯JavaScript,我们可以在浏览器的DOM上运行。
这里是功能上的使用方法。 我使用了ES6,但也可以自由使用ES5和函数表达式或函数定义,以适合你的JavaScript StyleGuide为准。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}
<!--结束片段-->
纯JS的例子。 在第一个例子中,我们得到我们的元素'的id,并添加例如。 2个类。
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})
在第二个例子中,我们得到元素的类名,然后再添加一个。
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
对于使用[Lodash][1]并希望更新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()
[1]: http://lodash.com
首先,给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>
你可以使用API querySelector来选择你的元素,然后用元素和新的类名作为参数创建一个函数。 对于现代浏览器使用classlist,对于IE8则使用其他。 然后你就可以在事件后调用这个函数。
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');