您可以使用document.querySelector
方法透過(guò)類(lèi)別名稱(chēng)尋找元素。
下面的程式碼假設(shè)「特定顏色名稱(chēng)」儲(chǔ)存在名為selectedColor
的變數(shù)中。它也對(duì)您的<style>
元素進(jìn)行了一些修正。您可以嘗試我的程式碼與您的程式碼進(jìn)行比較,以查看差異。
const selectedColor = "green"; document.querySelector(".color-wrap a." + selectedColor).parentNode.classList.add("selected");
.color-wrap {} .color-wrap li a {} .color-wrap li.selected a {border: red 1px solid;} .color-wrap .ivory {color: #fff;} .color-wrap .beige {color: #eee;} .color-wrap .green {color: green;} .color-wrap .blue {color: blue;}
<div class="color-wrap"> <ul> <li class="text"><a href="/link.." class="ivory">Ivory</a></li> <li class="text"><a href="/link.." class="beige">Beige</a></li> <li class="text"><a href="/link.." class="green">Green</a></li> <li class="text"><a href="/link.." class="blue">Blue</a></li> </ul> </div>