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

Question

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

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

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

我怎样才能做到这一点？

score 2361 · Accepted Answer

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

使用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.className。

score 1391 · Accepted Answer

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

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

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

element.classList.remove("otherclass");

我不希望自己添加任何空白空间和重复条目处理（使用该document.className方法时需要这样做）。存在一些浏览器限制，但您可以使用polyfill解决这些限制。

score 185 · Accepted Answer

随心所欲地找到目标元素“d”，然后：

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

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

score 143 · Accepted Answer

添加类

交叉兼容

在以下示例中，我们将 a 添加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');
```

删除类

表现

如果您关心性能，有选择地使用 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;

参考

使用原型

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

score 36 · Accepted Answer

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

添加类：

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

对于删除类：

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

score 25 · Accepted Answer

当我正在做的工作不保证使用库时，我使用这两个函数：

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

score 23 · Accepted Answer

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

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

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

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

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

score 18 · Accepted Answer

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

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

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

nameElem.classList.remove("anyclss")

score 17 · Accepted Answer

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

或者：

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

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

对于删除，您可以使用：

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

score 13 · Accepted Answer

向元素添加附加类：

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

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

要更改元素的所有类：

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

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

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

score 8 · Accepted Answer

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

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

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

score 8 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

我知道 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 once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

score 6 · Accepted Answer

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

score 5 · Accepted Answer

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

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

从那里您可以轻松地派生添加新类所需的 javascript... 只需在元素的 className 属性后面附加一个空格，然后是新类。知道了这一点，您还可以编写一个函数，以便稍后在需要时删除一个类。

score 5 · Accepted Answer

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

score 5 · Accepted Answer

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

JavaScript 提供了 2 种不同的方式来向 HTML 元素添加类：

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

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

参考：TutorialsTonight（javascript添加类）

一、使用`element.classList.add()`方法

var element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');

// adding multiple class
element.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.使用`element.className`属性

注意：始终使用+=运算符并在类名前添加一个空格以使用 classList 方法添加类。

var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';

// adding multiple class
element.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>

score 3 · Accepted Answer

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

score 3 · Accepted Answer

对于那些使用Lodash并想要更新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()

score 2 · Accepted Answer

最短的

image1.parentNode.className+=' box';

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

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

score 1 · Accepted Answer

您可以使用 API querySelector 来选择您的元素，然后使用该元素和新的类名作为参数创建一个函数。对现代浏览器使用类列表，否则对 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');

score 0 · Accepted Answer

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

score 0 · Accepted Answer

就我而言，我在 DOM 中调用了多个类main-wrapper，但我只想影响 parent 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如您所见，我使用过。

score 0 · Accepted Answer

0

h2.setAttribute('class', h2.getAttribute('class') + ' newClassName')

于 2022-02-16T15:40:52.260 回答

score -4 · Accepted Answer

这个js代码对我有用

提供类名替换

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

希望这对某人有帮助

score -9 · Accepted Answer

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

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

高温高压

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

27 回答 27

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

如果您需要支持 Internet Explorer 9 或更低版本：

添加类

删除类

参考

使用原型

使用 YUI

向元素添加附加类：

要更改元素的所有类：

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

一、使用element.classList.add()方法

2.使用element.className属性

最短的

Related

Reference

一、使用`element.classList.add()`方法

2.使用`element.className`属性