如何将一个类添加到给定的元素？
我有一个已经有一个类的元素：
<div class="someclass"> <img ... id="image1" name="image1" /> </div> 现在我想创build一个JavaScript函数，将添加一个类到div （不replace，但添加）。
我怎样才能做到这一点？
向元素的className属性添加一个空格加上新类的名称。 首先，在元素上添加一个id ，以便您可以轻松获得参考。
<div id="div1" class="someclass"> <img ... id="image1" name="image1" /> </div>
然后
var d = document.getElementById("div1"); d.className += " otherclass";
另请参阅MDN上的element.className 。
没有任何框架的最简单的方法是使用element.classList.add方法。
var element = document.getElementById("div1"); element.classList.add("otherclass");
编辑：如果你想从元素中删除类 –
element.classList.remove("otherclass");
我更喜欢不必添加任何空的空间和重复的条目处理我自己（这是使用document.className方法时需要）。 有一些浏览器的限制 ，但你可以使用polyfills来解决它们。
find你的目标元素“d”然而你希望然后：
d.className += ' additionalClass'; //note the space
你可以用更聪明的方式来包装，检查前存在，并检查空间要求等。
添加类
-
交叉兼容
在下面的例子中，我们将一个
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');
删除课程
-
性能
有select地使用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;
参考
- jsPerftesting用例：添加一个类
- jsPerftesting用例：删除一个类
使用原型
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");
当我正在做的工作不保证使用库时，我使用这两个函数：
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; }
假设你所做的不仅仅是添加这个类（例如，你有asynchronous请求等等），我还是推荐一个类似Prototype或者jQuery的库。
这将使你需要做的一切（包括这个）都变得非常简单。
假设你现在已经在你的页面上使用了jQuery，你可以使用这样的代码为一个元素添加一个类名（在这种情况下，在加载时）：
$(document).ready( function() { $('#div1').addClass( 'some_other_class' ); } );
查看其他东西的jQuery API浏览器 。
你可以使用classList.add或者classList.remove方法从一个元素中添加/删除一个类。
var nameElem = document.getElementById("name") nameElem.classList.add("anyclss")
上面的代码将添加（而不是replace）一个类“anyclass”到nameElem。 同样，你可以使用classList.remove（）方法来删除一个类。
nameElem.classList.remove("anyclss")
为一个元素添加一个额外的类：
要添加一个类到一个元素，而不删除/影响现有的值，追加一个空格和新的类名，如下所示：
document.getElementById("MyElement").className += " MyClass";
要更改元素的所有类：
要用一个或多个新类replace所有现有类，请设置className属性：
document.getElementById("MyElement").className = "MyClass";
（您可以使用空格分隔的列表来应用多个类。）
为了详细说明别人的说法，多个CSS类被合并在一个由空格分隔的string中。 因此，如果你想对它进行硬编码，它将看起来像这样：
<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并且想要支持较旧的浏览器：
function addClass(elem, clazz) { if (!elemHasClass(elem, clazz)) { elem.className += " " + clazz; } } function elemHasClass(elem, clazz) { return new RegExp("( |^)" + clazz + "( |$)").test(elem.className); }
我知道IE9正式closures，我们可以通过element.classList来实现，正如很多人所说的，但是我只是试着学习如何在没有classList情况classList使用上面的许多答案来学习它。
下面的代码扩展了上面的许多答案，并通过避免添加重复类来改进它
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');
用纯JS的示例。 在第一个例子中，我们得到我们的元素的ID和添加例如2类。
document.addEventListener('DOMContentLoaded', function() { document.getElementsById('tabGroup').className = "anyClass1 anyClass2"; })
在第二个例子中，我们获取元素的类名并添加1个。
document.addEventListener('DOMContentLoaded', function() { document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready"; })
我认为最好使用纯JavaScript，我们可以在浏览器的DOM上运行。
这是使用它的function方式。 我已经使用了ES6，但可以随意使用ES5和函数expression式或函数定义，以适合您的JavaScript StyleGuide。
'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) } }
首先给这个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 querySelectorselect您的元素，然后使用元素和新的类名作为参数创build一个函数。 对于现代浏览器使用classlist，对于IE8使用classlist。 然后你可以在事件发生后调用这个函数。
//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');
对于那些使用Lodash并想更新classNamestring的人：
// 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()
您可以使用类似于jQuery的现代方法
如果您只需要更改一个元素，那么首先在JS中find的元素就可以使用：
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代码为我工作
提供了类名replace
var DDCdiv = hEle.getElementBy..... var cssCNs = DDCdiv.getAttribute('class'); var Ta = cssCNs.split(' '); //split into an array for (var i=0; i< Ta.length;i++) { if (Ta[i] == 'visible'){ Ta[i] = 'hidden'; break;// quit for loop } else if (Ta[i] == 'hidden'){ Ta[i] = 'visible'; break;// quit for loop } } DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
要添加只是使用
var cssCNs = DDCdiv.getAttribute('class'); var Ta = cssCNs.split(' '); //split into an array Ta.push('New class name'); // Ta.push('Another class name');//etc... DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
删除使用
var cssCNs = DDCdiv.getAttribute('class'); var Ta = cssCNs.split(' '); //split into an array for (var i=0; i< Ta.length;i++) { if (Ta[i] == 'visible'){ Ta.splice( i, 1 ); break;// quit for loop } } DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
希望这有助于缓解
在YUI中，如果你包含yuidom ，你可以使用
YAHOO.util.Dom.addClass('div1','className');
HTH
function toggleClass (El) { if (El.className != "white") { El.className = "white" } else{ El.className = "black"; }; }
这将切换你想要切换没有jQuery的类
