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

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

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

和

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

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

4

4 回答 4

1

您需要遍历返回节点列表的查询结果 - 请注意，如果您在 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>

于 2018-03-16T03:44:14.987 回答
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>

于 2018-03-16T03:48:28.113 回答
0 
<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>
于 2018-03-16T03:56:07.600 回答
-1

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

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

$('.bearname').addClass('corgitype').removeClass('bearname');
于 2018-03-16T03:50:09.877 回答