我想将 CSS 样式类添加到一组选定元素的所有实例:例如，所有 p 元素以及所有 h4 元素。
我定义了两个 JS 变量，它们获取上述标签的所有元素，并将它们插入一个数组中，这样我就可以创建一个函数，理论上应该将所选类应用于所选元素/标签的所有实例.
但是，当我运行代码时，该函数似乎只将类分配给数组的第一项。
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.italic { font-style: italic; }
</style>
</head>
<body>
<h4>Text goes in here</h4>
<p>Text goes in here</p>
<script>
function styleTxt() {
let h4Elems = document.getElementsByTagName("H4");
let pElems = document.getElementsByTagName("P");
const elemArray = [pElems, h4Elems];
for (eachElem in elemArray) {
let elemInsts = elemArray[eachElem];
for (eachInst in elemInsts) {
let givenInst = elemInsts[eachInst];
givenInst.classList.add("italic");
}
}
}
styleTxt();
</script>
</body>
</html>
如果我颠倒数组中元素标签的顺序，那么 h4 元素将获得 .italic 类，但 p元素不会。
也许不可能两次使用“文档”指令？是否有替代方法自动将同一类添加到一组多个(但不是全部)html 标签？
最佳答案
您正在遍历 HTMLCollection 的每个属性，包括像 length 这样的属性，导致 givenInst 成为一个数字。由于它没有 classList 属性，因此在 undefined 上调用 add 会产生错误并终止循环。
为了解决这个问题，您可以使用isNaN 来检查属性是否为数字:
.italic {
font-style: italics;
}<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.italic {
font-style: italic;
}
</style>
</head>
<body>
<h4>Text goes in here</h4>
<p>Text goes in here</p>
<script>
function styleTxt() {
let h4Elems = document.getElementsByTagName("H4");
let pElems = document.getElementsByTagName("P");
const elemArray = [pElems, h4Elems];
for (eachElem in elemArray) {
let elemInsts = elemArray[eachElem];
for (eachInst in elemInsts) {
if (!isNaN(eachInst)) {
let givenInst = elemInsts[eachInst];
givenInst.classList.add("italic");
}
}
}
}
styleTxt();
</script>
</body>
</html>但是，更好的方法是使用 for...of 循环:
.italic {
font-style: italics;
}<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.italic {
font-style: italic;
}
</style>
</head>
<body>
<h4>Text goes in here</h4>
<p>Text goes in here</p>
<script>
function styleTxt() {
let h4Elems = document.getElementsByTagName("H4");
let pElems = document.getElementsByTagName("P");
const elemArray = [pElems, h4Elems];
for (eachElem of elemArray) {
for (eachInst of eachElem) {
eachInst.classList.add("italic");
}
}
}
styleTxt();
</script>
</body>
</html>关于javascript - HTML + Javascript : can't get all instances from two elements at once?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69339070/