Question

我有一个菜单，我需要改变它的风格：

document.getElementById(li).style.background ="red";

这是CSS：

.menu, .menu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 191px;
background ="blue"

}

.menu li{
position: relative;
}

.menu li a{
border-radius: 5px;
background: white url(../graphics/glossyback.gif) repeat-x bottom left;
font: 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

它正在改变背景但仅限于.menu li ul。我想改变.menu li中的背景。感谢您的帮助。

Answer 1

你缺少引号

document.getElementById('li');

将返回标识为li

的第一个元素

您可以更改其背景

document.getElementById('li').style.background ="red";

用于选择具有类名li的多个元素，您可以使用

document.getElementsByClassName('li')

或者为了更准确的选择，您可以使用document.querySelectorAll(.menu li a)

返回一个匹配节点列表，您可以在其上迭代并设置背景，如下所示：

var elements =document.querySelectorAll('.menu li a');
for(var i=0;i<elements.length;i++)
elements[i].style.background='red';

Answer 2

我建议使用像jQuery这样的东西，因为它会为你做很多繁重的工作。此外，它将使其与其他浏览器兼容，您会发现加班将成为Web开发中最耗时的事情之一。

但要回答你的问题，你可以在javascript中执行以下操作：

document.querySelectorAll（＆＃39; #li a＆＃39;）。style.background =＆＃34; red＆＃34;;

Answer 3

您的CSS .menu li{表示li是一个元素，而不是分配给另一个元素的ID。所以你应该使用

var li = document.getElementsByTagName("li");

for(var i = 0; li[i]; i++){       
    li[i].style.background = "red";  //works for multiple `<li>` elements on the page
}

要获得具体的确切结果，请使用：

var els = document.querySelectorAll(".menu li ul, .menu li a");  // and the same for loop follows

Demo

使用javascript更改li样式

3 个答案: