如何更改没有 id 的元素的类名？
Posted
技术标签:
【中文标题】如何更改没有 id 的元素的类名？【英文标题】：How to change class name of an element that doesn't have an 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 属性，所以不要费心设置它们.您需要做的是遍历列表并单独设置类。这必须是重复的。 【参考方案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。以上是关于如何更改没有 id 的元素的类名？的主要内容，如果未能解决你的问题，请参考以下文章