我想制作一個具有功能的元素串列，如果您單擊串列元素，其文本將變為紅色。然后我想制作一個按鈕，將串列中的所有元素設定為黑色。但是，該按鈕只會使尚未單擊的串列元素變為黑色。新的紅色物品不受影響。
<ul id="outerUl" style="color:pink">
<li>First item in list</li>
<li>Second item in list</li>
</ul>
<input type="submit" onclick="clearListColour()">
和 JavaScript：
<script>
var textColourChanger = function(e){
e.target.style.color = 'red';
}
function clearListColour(){
document.getElementById('outerUl').style.color = 'black';
}
document.getElementById('outerUl').addEventListener('click', textColourChanger);
當您點擊按鈕時，您可以在檢查中看到 ul 的顏色設定為黑色，但它似乎無法通過單擊將其設定為 li 顏色。
uj5u.com熱心網友回復：
您創建的按鈕在<ul>元素中設定了“顏色”屬性，因此它將影響其中的每個元素<ul>
要覆寫顏色，<ul>您需要直接在<li>元素中設定顏色
為了達到只改變點擊<li>item顏色的效果，需要給特定<li>item添加EventListener ，這樣每當點擊其中一個item時，它的字體顏色就會發生變化。要將它們全部重置為黑色，您必須執行相同的操作，將所有字體顏色更改回黑色，或者使用 !important<ul>顏色標志操作 css 。
將 id 添加到您的<li>專案中，例如<li id="li1"> <li id="li2">
通過 Id addEventListeners 到它們，您應該很高興
uj5u.com熱心網友回復：
如果你使用一些css 會更容易：
const
outerUl = document.getElementById('outerUl')
, BtClear = document.getElementById('bt-clearList')
;
outerUl.onclick = e =>
{
if (!e.target.matches('li')) return
e.target.classList.add('onRed')
}
BtClear.onclick = e =>
{
outerUl.querySelectorAll('li.onRed').forEach(LI=>LI.classList.remove('onRed'))
}#outerUl li {
color : pink;
cursor : pointer;
}
#outerUl li.onRed {
color : red;
}<ul id="outerUl">
<li>First item in list</li>
<li>Second item in list</li>
</ul>
<button id="bt-clearList"> Clear List Colours</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318015.html
標籤：javascript dom