js设置所有li的背景颜色
时间: 2023-06-06 16:08:01 浏览: 54
这是一个技术问题,我可以帮助您解答。您可以使用以下语句来设置所有 li 元素的背景颜色:
```
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = "red";
}
```
请注意,颜色值可以根据您的需要进行更改。
相关问题
用js实现想点击哪一个li哪一个的背景颜色就可以改变
可以使用JavaScript来实现点击li元素改变背景颜色的功能。你可以通过以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color on Click</title>
<style>
.active {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
var listItems = document.querySelectorAll("#myList li");
listItems.forEach(function(item) {
item.addEventListener("click", function() {
// Remove active class from all list items
listItems.forEach(function(li) {
li.classList.remove("active");
});
// Add active class to clicked list item
this.classList.add("active");
});
});
</script>
</body>
</html>
```
上述代码中,我们首先使用CSS定义了一个名为`.active`的类,将其背景颜色设置为黄色。然后,使用JavaScript获取了所有的li元素,并为每个li元素添加了一个点击事件监听器。当点击某个li元素时,会将所有li元素的`active`类移除,然后将点击的li元素添加`active`类,从而改变其背景颜色为黄色。
你可以将上述代码保存为一个HTML文件并在浏览器中打开,然后尝试点击不同的li元素,观察背景颜色的改变。
li列表实现单击之后背景颜色改变,单击其它的li之后,文字颜色恢复
好的,那您可以使用 JavaScript 实现这个效果。首先,您需要为每个 li 元素添加一个事件监听器,监听 click 事件。然后,当某个 li 被单击时,您可以使用 JavaScript 改变该 li 元素的样式,例如将其背景颜色改为灰色,文字颜色改为白色。同时,您需要将其它 li 元素的样式恢复为原来的样式。
以下是一个简单的示例:
HTML 代码:
```
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
CSS 代码:
```
li {
background-color: white;
color: black;
padding: 10px;
cursor: pointer;
}
li.selected {
background-color: gray;
color: white;
}
```
JavaScript 代码:
```
// 获取所有 li 元素
var lis = document.querySelectorAll("#myList li");
// 为每个 li 元素添加事件监听器
lis.forEach(function(li) {
li.addEventListener("click", function() {
// 首先将所有 li 元素的样式恢复为原来的样式
lis.forEach(function(li) {
li.classList.remove("selected");
});
// 然后将当前被单击的 li 元素的样式改为选中状态
this.classList.add("selected");
});
});
```
这样,当用户单击某个 li 元素时,该元素的背景颜色会变为灰色,文字颜色会变为白色,其它 li 元素的样式会恢复为原来的样式。