我想向一組選擇性元素的所有實體添加一個 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 標簽中？
uj5u.com熱心網友回復：
您正在遍歷 HTMLCollection 的每個屬性，包括像length、等屬性，從而導致givenInst成為一個數字。由于它沒有classList屬性，呼叫addonundefined會產生錯誤并終止回圈。
要解決這個問題，您可以使用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>uj5u.com熱心網友回復：
您可能希望為此更喜歡for...of回圈并使用擴展運算子。它將產生更好的代碼輸出：
function styleTxt() {
const h4Elems = document.getElementsByTagName("H4");
const pElems = document.getElementsByTagName("P");
const elemArray = [...pElems, ...h4Elems];
for (const eachElem of elemArray) {
eachElem.classList.add("italic");
}
}
當然，您始終可以使用該querySelectorAll方法同時選擇兩種型別的元素：
const all = document.querySelectorAll("h4, p");
// Using the for...of loop:
for ( const el of all ){
el.classList.add("italic");
}
// Using the `forEach` method:
all.forEach( el => el.classList.add("italic") )
uj5u.com熱心網友回復：
使用Document.querySelectorAll()獲得這兩種型別的元素。迭代NodeListwith NodeList.forEach()，并將類添加到每個元素。
function styleTxt() {
document.querySelectorAll('h4, p')
.forEach(el => el.classList.add('italic'));
}
styleTxt();.italic {
font-style: italic;
}<h4>Text goes in here</h4>
<p>Text goes in here</p>uj5u.com熱心網友回復：
試試這個
<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() {
const h4Elems = Array.from(document.getElementsByTagName("H4"));
const pElems = Array.from(document.getElementsByTagName("P"));
const elemArray = [...pElems, ...h4Elems];
elemArray.forEach(eachElem => {
eachElem.classList.add("italic");
})
}
styleTxt();
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318157.html
標籤：javascript html css 数组 dom
上一篇：javascript中是否有任何方法可以為一個HTML元素單獨操作一個函式？
下一篇：移除子項不包含屬性值