TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
有很多方法可以做到這一點(diǎn)。這是始終選擇第一個(gè)列表的列表。替換成您想要的顏色。
function swap(){
document.querySelectorAll("ul:first-of-type li").forEach(x => x.style.backgroundColor = (x.style.backgroundColor == "black" ? "white" : "black"));
};
<ul>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
</ul>
<ul>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
</ul>
<button id="swap" onclick="swap()">Button</button>
TA貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
您還可以切換一個(gè)類來反轉(zhuǎn)顏色，這將是一個(gè)更短的代碼并且更容易更新，您還可以使用需要變量的 function() ，因此您可以多次使用它。
例子
function invert(x) {
document.querySelector(x).classList.toggle("invert")
};
body {
display: flex;
gap: 1em;
align-items: center;
justify-content: center;
}
ul {
background: gray;
}
li {
background: white;
color: black;
padding: 0.2em;
margin: 0.2em;
}
.invert {
filter: invert(100%);
}
<button type="button" onclick="invert('ul:first-of-type ')">invert first ul</button>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul><button type="button" onclick="invert('ul:last-of-type ')">invert last ul</button>
舉報(bào)