可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have an element that already has a class:

Now I want to create a Javascript function that will add a class to the div (not replace, but add).

How can I do that?

回答1:

Add a space plus the name of your new class to the className property of the element. First, put an id on the element so you can easily get a reference.

Then

var d = document.getElementById("div1"); d.className += " otherclass";

回答2:

The easiest way to do this without any framework is to use element.classList.add method.

var element = document.getElementById("div1"); element.classList.add("otherclass");

Edit: And if you want to remove class from an element -

element.classList.remove("otherclass");

I prefer not having to add any empty space and duplicate entry handling myself (which is required when using the document.className approach). There are some browser limitations, but you can work around them using polyfills.

回答3:

find your target element "d" however you wish and then:

d.className += ' additionalClass'; //note the space

you can wrap that in cleverer ways to check pre-existence, and check for space requirements etc..

回答4:

Add Class

Cross Compatible

In the following example we add a classname to the element. This is IE-8 compatible.

var a = document.body; a.classList ? a.classList.add('classname') : a.className += ' classname';

This is shorthand for the following..

var a = document.body; if (a.classList) {     a.classList.add('wait'); } else {     a.className += ' wait'; }

Performance

If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4% faster.
```
var z = document.body; document.body.classList.add('wait'); 
```

Convenience

Alternatively you could use jQuery but the resulting performance is significantly slower. 94% slower according to jsPerf
```
$('body').addClass('wait'); 
```

Removing the class

Performance

Using jQuery selectively is the best method for removing a class if your concerned with performance
```
var a = document.body, c = ' classname'; $(a).removeClass(c); 
```

Without jQuery it's 32% slower

var a = document.body, c = ' classname'; a.className = a.className.replace( c, '' ); a.className = a.className + c;

References

Using Prototype

Element("document.body").ClassNames.add("classname") Element("document.body").ClassNames.remove("classname") Element("document.body").ClassNames.set("classname")

Using YUI

YAHOO.util.Dom.hasClass(document.body,"classname") YAHOO.util.Dom.addClass(document.body,"classname") YAHOO.util.Dom.removeClass(document.body,"classname")

回答5:

Another approach to add the class to element using pure JavaScript

For adding class:

document.getElementById("div1").classList.add("classToBeAdded");

For removing class:

document.getElementById("div1").classList.remove("classToBeRemoved");

回答6:

When the work I'm doing doesn't warrant using a library, I use these two functions:

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; }

回答7:

Assuming you're doing more than just adding this one class (eg, you've got asynchronous requests and so on going on as well), I'd recommend a library like Prototype or jQuery.

This will make just about everything you'll need to do (including this) very simple.

So let's say you've got jQuery on your page now, you could use code like this to add a class name to an element (on load, in this case):

$(document).ready( function() {   $('#div1').addClass( 'some_other_class' ); } );

Check out the jQuery API browser for other stuff.

回答8:

You can use the classList.add OR classList.remove method to add/remove a class from a element.

var nameElem = document.getElementById("name") nameElem.classList.add("anyclss")

The above code will add(and NOT replace) a class "anyclass" to nameElem. Similarly you can use classList.remove() method to remove a class.

nameElem.classList.remove("anyclss")

回答9:

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

document.getElementById("MyElement").className = "MyClass";

(You can use a space-delimited list to apply multiple classes.)

回答10:

Just to elaborate on what others have said, multiple CSS classes are combined in a single string, delimited by spaces. Thus, if you wanted to hard-code it, it would simply look like this:

From there you can easily derive the javascript necessary to add a new class... just append a space followed by the new class to the element's className property. Knowing this, you can also write a function to remove a class later should the need arise.

回答11:

To add, remove or check element classes in a simple way:

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');

回答12:

If you don't want to use jQuery and want to support older browsers:

function addClass(elem, clazz) {     if (!elemHasClass(elem, clazz)) {         elem.className += " " + clazz;     } }  function elemHasClass(elem, clazz) {     return new RegExp("( |^)" + clazz + "( |$)").test(elem.className); }

回答13:

I know IE9 is shutdown officially and we can achieve it with element.classList as many told above but I just tried to learn how it works without classList with help of many answers above I could learn it.

Below code extends many answers above and improves them by avoiding adding duplicate classes.

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');

回答14:

Sample with pure JS. In first example we get our element's id and add e.g. 2 classes.

document.addEventListener('DOMContentLoaded', function() {     document.getElementsById('tabGroup').className = "anyClass1 anyClass2"; })

In second example we get element's class name and add 1 more.

document.addEventListener('DOMContentLoaded', function() {     document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready"; })

回答15:

I think it's better to use pure JavaScript, which we can run on the DOM of the Browser.

Here is the functional way to use it. I have used ES6 but feel free to use ES5 and function expression or function definition, whichever suits your JavaScript StyleGuide.

'use strict'  const oldAdd = (element, className) => {   let classes = element.className.split(' ')   if (classes.indexOf(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)   } }

回答16:

You can use modern approach similar to jQuery

If you need to change only one element, first one that JS will find in DOM, you can use this:

document.querySelector('.someclass').className += " red";

.red {   color: red; }

   This method will add class "red" only to first element in DOM
 
     lorem ipsum
 
     lorem ipsum
 
     lorem ipsum

Keep in mind to leave one space before class name.

If you have multiple classes where you want to add new class, you can use it like this

document.querySelectorAll('.someclass').forEach(function(element) {   element.className += " red"; });

.red {   color: red; }

   This method will add class "red" to all elements in DOM that have "someclass" class.
 
     lorem ipsum
 
     lorem ipsum
 
     lorem ipsum

回答17:

I too think that the fastest way is to use Element.prototype.classList as in es5: document.querySelector(".my.super-class").classList.add('new-class') but in ie8 there is no such thing as Element.prototype.classList, anyway you can polyfill it with this snippet (fell free to edit and improve it):

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 	}) }

回答18:

first, give the div an id. Then, call function appendClass:

回答19:

You can use the API querySelector to select your element and then create a function with the element and the new classname as parameters. Using classlist for modern browsers, else for IE8. Then you can call the function after an event.

 //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');

回答20:

For those using Lodash and wanting to update className string:

// 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()

回答21:

This js code works for me

provides classname replacement

var DDCdiv = hEle.getElementBy.....  var cssCNs = DDCdiv.getAttribute('class'); var Ta = cssCNs.split(' '); //split into an array for (var i=0; i

To add just use

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

To remove use

var cssCNs = DDCdiv.getAttribute('class'); var Ta = cssCNs.split(' '); //split into an array  for (var i=0; i

Hope this is helpful to sombody

回答22:

In YUI, if you include yuidom, you can use

YAHOO.util.Dom.addClass('div1','className');

HTH

回答23:

function toggleClass (El) {     if (El.className != "white") {         El.className = "white"     }      else{         El.className = "black";     }; }

How do I add a class to a given element?

问题: