如何将类添加到给定元素？

我有一个已经有类的元素：

<div class="someclass"><img ... id="image1" name="image1" /></div>

现在，我想创建一个JavaScript函数，它将向div添加一个类（不是替换，而是添加）。

我怎么能那么做？

2286889 次浏览
小开
最佳答案

如果您只针对现代浏览器：

使用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";

注意otherclass之前的空格。包含该空格很重要，否则它会损害类列表中位于它之前的现有类。

另见MDN上的element.class名称。

小开

假设你做的不仅仅是添加这个类（例如，你有异步请求等等），我推荐一个像原型或jQuery这样的库。

这将使你需要做的一切（包括这个）非常简单。

所以假设你现在在你的页面上有jQuery，你可以使用这样的代码向元素添加类名（在这种情况下，在加载时）：

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

查看其他内容的jQuery API浏览器。

小开

找到你的目标元素“d”，然后：

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

你可以用更聪明的方式包装它来检查预先存在，并检查空间要求等。

小开

首先，给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>
小开

在YUI中，如果包含yuidom，则可以使用

YAHOO.util.Dom.addClass（'div1'，'class Name'）；

HTH

小开

只是为了详细说明其他人所说的，多个CSS类组合在一个字符串中，由空格分隔。因此，如果你想硬编码它，它只是看起来像这样：

<div class="someClass otherClass yetAnotherClass"><img ... id="image1" name="image1" /></div>

从那里你可以很容易地派生添加新类所需的javascript……只需将一个空格后跟新类附加到元素的class Name属性中。知道了这一点，你还可以编写一个函数来在需要时删除一个类。

小开

当我所做的工作不需要使用库时，我使用以下两个函数：

function addClass( classname, element ) {var cn = element.className;//test for existanceif( cn.indexOf( classname ) != -1 ) {return;}//add a space if the element already has classif( 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;}
小开

在没有任何框架的情况下做到这一点的最简单方法是使用element.classList.add方法。

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

编辑：如果你想从元素中删除类-

element.classList.remove("otherclass");

我更喜欢自己不必添加任何空白和重复条目处理（使用document.className方法时需要）。有一些浏览器限制，但您可以使用PolyFill来解决它们。

小开

您可以使用classList.addORclassList.remove方法从元素中添加/删除类。

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

上面的代码将添加（而不是替换）一个类“anyclass”到nameElem。同样，您可以使用classList.remove（）方法来删除类。

nameElem.classList.remove("anyclss")
小开

以简单的方式添加、删除或检查元素类：

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 classuclass.remove(elem,'someClass');
小开

这个js代码适合我

提供类名替换

var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');var Ta = cssCNs.split(' '); //split into an arrayfor (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 arrayTa.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

希望这对某人有帮助

小开

另一种使用纯JavaScript将类添加到元素的方法

对于添加类：

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

删除类：

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

添加类

  • 交叉兼容

    在下面的示例中，我们将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';}

  • 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

  1. jsPerf Test Case: Adding a Class
  2. jsPerf Test Case: Removing a Class

Using Prototype

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")
小开

您可以使用API querySelector选择您的元素，然后创建一个以元素和新类名为参数的函数。使用现代浏览器的类列表，否则使用IE8。然后您可以在事件后调用该函数。 

 //select the dom elementvar addClassVar = document.querySelector('.someclass');
//define the addclass functionvar addClass = function(el,className){if (el.classList){el.classList.add(className);}else {el.className += ' ' + className;}};
//call the functionaddClass(addClassVar, 'newClass');
小开

纯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";})
小开

向元素添加一个额外的类：

要向元素添加类，而不删除/影响现有值，请附加一个空格和新的类名，如下所示：

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

要更改元素的所有类：

要将所有现有类替换为一个或多个新类，请设置class Name属性：

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

（您可以使用空格分隔的列表来应用多个类。）

小开

如果您不想使用jQuery并希望支持旧浏览器：

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

我认为最好使用纯JavaScript，我们可以在浏览器的DOM上运行它。

这是使用它的功能方式。我使用过ES6，但可以自由使用ES5和函数表达式或函数定义，以适合您的JavaScript样式指南为限。

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

小开

我知道IE9正式关闭，我们可以用element.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 onceaddClass(document.querySelector('#getbyid'),'3 4 5 5 5');
小开

对于那些使用Lodash并想要更新className字符串的人：

// get element referencevar 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 classeselem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()
小开

您可以使用类似于jQuery的现代方法

如果您只需要更改一个元素，JS将在DOM中找到的第一个元素，您可以使用： 

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>

请记住留下一个空格之前类名。

如果你有多个类想要添加新类，你可以这样使用它

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>

小开

我也认为最快的方法是使用es5中的Element.prototype.class列表：document.querySelector(".my.super-class").classList.add('new-class')但是在ie8中没有Element.prototype.class列表这样的东西，无论如何你可以用这个片段来填充它（可以自由编辑和改进它）：

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)] = undefinedthis.__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})}

小开

最短

image1.parentNode.className+=' box';

image1.parentNode.className+=' box';
.box { width: 100px; height:100px; background: red; }
<div class="someclass"><img ... id="image1" name="image1" /></div>

小开 
document.getElementById('some_id').className+='  someclassname'

或：

document.getElementById('some_id').classList.add('someclassname')

当第二种方法不起作用时，第一种方法有助于添加类。
在第一种方法中，不要忘记在' someclassname'前面保留一个空格。

对于删除，您可以使用：

document.getElementById('some_id').classList.remove('someclassname')
小开

在我的例子中，我在DOM中有多个名为main-wrapper的类，但我只想影响父类main-wrapper。使用:first Selector（https://api.jquery.com/first-selector/），我可以选择第一个匹配的DOM元素。这是我的解决方案：

$(document).ready( function() {$('.main-wrapper:first').addClass('homepage-redesign');$('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');} );

我还为DOM中特定div的第二个子级做了同样的事情，您可以在我使用$('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');的代码中看到。

注意：如您所见，我使用了jQuery。

小开

使用JavaScript添加类的2种不同方法

JavaScript提供了2种不同的方法，您可以通过这些方法将类添加到超文本标记语言元素中：

  1. 使用element.classList.add()方法
  2. 使用className属性

使用这两种方法，您可以一次添加单个或多个类。

1.使用element.classList.add()方法

var element = document.querySelector('.box');// using add method// adding single classelement.classList.add('color');
// adding multiple classelement.classList.add('border', 'shadow');
.box {width: 200px;height: 100px;}.color {background: skyblue;}.border {border: 2px solid black;}.shadow {box-shadow: 5px 5px 5px gray;}
<div class="box">My Box</div>

2. Using element.className Property

Note: Always use += operator and add a space before class name to add class with classList method.

var element = document.querySelector('.box');// using className Property// adding single classelement.className += ' color';
// adding multiple classelement.className += ' border shadow';
.box {width: 200px;height: 100px;}.color {background: skyblue;}.border {border: 2px solid black;}.shadow {box-shadow: 5px 5px 5px gray;}
<div class="box">My Box</div>

小开

这可能对WordPress开发人员等有帮助。

document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');

提交答案