如何在javascript中选择特定的列表元素.改变它的风格

Question

我想在单击某个特定li项目时更改它的样式，我该怎么做？

Answer 1

您可以为单击事件添加一个事件侦听器，然后为特定的li添加CSS。

香草JS

document.querySelectorAll('li').forEach(item => {
item.addEventListener('click', event => {
item.style.backgroundColor = "blue";
});
})

<ul>
<li>Hello</li>
<li>world!</li>
<li>Filler</li>
</ul>

jQuery：

$('li').click(function() {
$(this).css("background-color", "blue");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Hello</li>
<li>world!</li>
<li>Filler</li>
</ul>

Answer 2

您可以在样式上使用一个额外的类和一点javascript，这里有一个演示：

const list = document.querySelectorAll('.listItem');
list.forEach(item => 
item.addEventListener('click', e => e.target.classList.add('clicked') )
);

.listItem {
background: black;
color: white;
cursor: pointer;
}
.clicked {
background: white;
color: black;
}

<ul>
<li class="listItem">Click me</li>
<li class="listItem">Or me</li>    
</ul>

有更多的方法，但这似乎很容易理解。