如何为一个给定的元素添加一个类？

我有一个元素已经有了一个类。

``html

```

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

我怎样才能做到这一点呢？

Edwin Pratt
已编辑的问题 9日 五月 2019 в 10:31
编程
javascript dom-manipulation
3日 二月 2009 в 1:54
42 种观点
解决办法

在元素的 "className "属性中添加一个空格和你的新类的名称。首先，在元素上放一个`id'，这样你就可以很容易地得到一个引用。

<div id="div1" class="someclass">

</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）。

Sean Ker
编辑本段答案4日 十月 2019 в 9:27
评论(14)

在没有任何框架的情况下，最简单的方法是使用[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

Moazzam Khan
编辑本段答案26日 九月 2017 в 10:32
评论(9)

找到你的目标元素"d"，不管你怎么想，然后。

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

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

Cœur
编辑本段答案26日 二月 2017 в 4:29
评论(4)

＃＃添加类

  • 交叉兼容

在下面的例子中，我们在<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);

  • 如果没有jQuery，它的速度会慢32%。

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

参考文献

  1. jsPerf测试案例。 添加一个类](http://jsperf.com/addclass99)

  2. jsPerf测试案例。 删除一个类](http://jsperf.com/removeclass99)

＃＃使用原型

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")
davidcondrey
编辑本段答案2日 八月 2015 в 7:20
评论(7)

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

用于添加类：

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

用于删除类：

document.getElementById("div1").classList.remove("classToBeRemoved");
评论(3)

当我所做的工作不需要使用库时，我会使用这两个函数。

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;
}
评论(2)

假设你所做的不仅仅是添加这一个类（例如，你也有异步请求等等），我建议使用Prototype或jQuery等库。

这将使你需要做的所有事情（包括这个）都非常简单。

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

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

查看jQuery API浏览器，了解其他内容。

评论(0)

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

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

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

nameElem.classList.remove("anyclss")
评论(2)

为元素添加一个额外的类。

要在元素中添加一个类，而不删除/影响现有的值，请在新的类名后面加上一个空格，就像这样：{{5517659}}}。

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

要改变一个元素的所有类。

要用一个或多个新的类替换所有现有的类，请设置className属性。

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

(你可以使用一个空间限定的列表来应用多个类。)

评论(0)

如果你不想使用jQuery，又想支持旧版浏览器。

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
评论(0)

我知道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');
Mowzer
编辑本段答案24日 三月 2017 в 2:18
评论(0)

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

<div class="someClass otherClass yetAnotherClass">

</div>

从那里你可以很容易地推导出添加新类所需的javascript......。 只需在元素的className属性上添加一个空格，然后再加上新类。 知道了这一点，你也可以写一个函数来在以后需要的时候删除一个类。

评论(0)

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

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');
评论(0)

你可以使用类似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>

<！--结束片段-->

评论(0)

我也觉得最快的方法是使用Element.prototype.classList，就像es5一样。 document.querySelector(".my.super-class").classList.add(&#39;new-class&#39;)。 但在ie8中并没有Element.prototype.classList这样的东西，无论如何你可以用这个代码段来填充它（可以自由编辑和改进它）。

-- begin snippet: js hide: false console: true

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

<！--结束片段-->

评论(0)

我认为最好使用纯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)
  }
}

<！--结束片段-->

revelt
编辑本段答案8日 一月 2017 в 9:55
评论(0)

纯JS的例子。 在第一个例子中，我们得到我们的元素'的id，并添加例如。 2个类。

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

在第二个例子中，我们得到元素的类名，然后再添加一个。

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

对于使用[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

评论(0)

首先，给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>
评论(2)

你可以使用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');
评论(1)