如何更改没有 id 的元素的类名？答案

【问题标题】：How to change class name of an element that doesn't have an id?如何更改没有 id 的元素的类名？
【发布时间】：2018-08-25 01:15:49
【问题描述】：

<ul>
 <li class="bearname">Smokey</li>
 <li class="bearname">Teddy</li>
</ul>

如何在此处更改这些类名？我试过了;

document.querySelectorAll('li').className = "corgitype"

和

document.querySelectorAll('li').classList = "corgitype"

但没有任何改变。 corgitype 是我想在 bearname 上覆盖的新类名

【问题讨论】：

querySelectorAll 返回一个 NodeList，它们没有 className 或 classList 属性，所以不要费心设置它们.您需要做的是遍历列表并单独设置类。这必须是重复的。

标签： javascript dom class-names

【解决方案1】：

querySelectorAll 返回一个静态集合。您需要迭代此集合并可以使用 className 替换现有集合

document.querySelectorAll('li').forEach(function(item) {
  item.className = 'corgitype';
})

.corgitype {
  color: green;
}

<ul>
  <li class="bearname">Smokey</li>
  <li class="bearname">Teddy</li>
</ul>

【讨论】：

【解决方案2】：

您需要遍历返回节点列表的查询结果 - 请注意，如果您在 li 上设置多个类，那么这将覆盖所有类。顺便说一句 - 如果它只是你想要做的样式 - 那么你可以在 css - ul > li {//css 样式规则} 中完全没有类的情况下获得 li，因此甚至可能不需要类。

编辑 - 我在其中添加了一些额外的绒毛，以允许切换类和样式 - 更冗长 - 但更容易看到类名更改的效果。

function changeClass(value){
  var listItems = document.querySelectorAll('li');
  var index = parseInt(value);
  var type;
  index%2 == 0
   ? type = "corgitype"
   : type = "bearname"
    
  for(i=0;i<listItems.length;i++){
    listItems[i].classList= type;
   };
   document.getElementById('toggleButton').value = index+1;
}

.bearname {color:blue}
.corgitype {color: red}

<ul>
 <li class="bearname">Smokey</li>
 <li class="bearname">Teddy</li>
</ul>
<hr/>
<button type="button" onclick="changeClass(this.value)" value="0" id="toggleButton">Click to toggle classes</button>

【讨论】：

值得注意的是，NodeList 接口现在有一个forEach method（但可能缺少支持）。
@RobG - 这很有趣 - 必须为这些查询做一个来回循环很乏味 - 将进行调查。谢谢
您也可以使用Array.from(document.querySelectorAll(...)).forEach(...)，但要输入更多内容。 ;-)

【解决方案3】：

<html>
<head>
<style>
.classa {
color:red;
}
.classb {
color:blue;
}
</style>

<script>
function change() {
    var list = document.getElementsByTagName("li");
    for (var i=0; i<list.length; i++) {
    var el = list[i];
    el.classList.remove('classa') ;
    el.classList.add('classb') ;
    }
}
</script>
</head>

<body>
<li class="classa">aaa</li>
<li class="classa">bbb</li>
<button type="button" onclick="change();">change</button>
</body>

</html>

【讨论】：

【解决方案4】：

您可以使用 jQuery 来完成此操作。您必须在项目或页面中包含 jQuery 才能利用其功能。有一个这样做的教程here。

一旦你添加了 jQuery，完成你所追求的最简单的方法是：

$('.bearname').addClass('corgitype').removeClass('bearname');

【讨论】：

见jQuery is great。