如何向给定元素添加类？

Question

如何向给定元素添加类？

1667

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

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

现在，我想创建一个JavaScript函数，将会给

标签添加一个类（不是替换，而是添加）。

我该怎么做呢？

- Blankman

77

如果您在2020年或之后阅读此线程，请跳过旧的className方法，改用element.classList.add("my-class")。这样做可以使代码更简洁易懂。 - Pikamander2

28个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Soufian · Answer 1

大多数人在getElementById上使用.classList.add，但我想在getElementByClassName上使用它。为了做到这一点，我使用了以下代码中的forEach：

document.getElementsByClassName("class-name").forEach(element => element.classList.add("new-class"));

但它没有起作用，因为我发现getElementsByClassName返回的是HTML集合而不是数组。要处理这个问题，我使用了下面的代码将其转换为数组：

[...document.getElementsByClassName("class-name")].forEach(element => element.classList.add("new-class"));

- Vasyl Gutnyk · Answer 2

使用纯JS的示例。在第一个示例中，我们获取元素的id并添加例如2个类。

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

在第二个例子中，我们获取元素的类名并添加一个额外的类名。

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

- Kamil Kiełczewski · Answer 3

最短路径算法

image1.parentNode.className+=' box';

image1.parentNode.className+=' box';

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

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

- Anastasis · Answer 4

您可以使用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');

- Jaime Montoya · Answer 5

在我的情况下，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。

- tehvan · Answer 6

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

- Anon · Answer 7

这段 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

希望这对某人有所帮助

- Alagu · Answer 8

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

。

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

HTH