使用javaScript更改子类的css样式

如何使用javaScript更改css样式的子类

document.getElementById('main-menu').getElements("li a").style.color="some_color";
// Or simply
document.getElements("#main-menu li a").style.color="some_color";

为了让我自己明白，假设我们有以下代码：

ul#main-menu{
margin:0 0 0 285px;
padding:0 0 0 0;
list-style:none;    
}

ul#main-menu li a{
margin:0 0 0 0;
padding:8px 10px 7px 10px;
color:#FFF;
}

我可以使用以下代码更改ul#主菜单的边距：

document.getElementById（'main-menu'）.style.marginLeft='10px'

那么，如何使用javaScript更改
li a
的颜色呢？
如果不使用jQuery，这个代码段将存储在主菜单的每个
li
中可以找到的每个
a
。然后，它将遍历每个项目并将其文本颜色设置为红色

document.getElementById('main-menu').getElements("li a").style.color="some_color";
// Or simply
document.getElements("#main-menu li a").style.color="some_color";

var a_list = document.querySelectorAll('#main-menu li a');

for (var i=0; i<a_list.length; i++) {
    a_list[i].style.color = 'red';
}

但是，请注意，使用JavaScript设置样式规则并不是一种好的做法，因为CSS就是为此而设计的。如果您使用JavaScript向
a
元素添加一个类（可能类似于
.higlight text
）以使其行为符合您的意愿，那会更好。
使用

你能显示你的html部分吗？你的代码不工作，我使用dw6作为IDE，它甚至没有显示方法。getElements（）@SuciuLucian啊，你说得对
getElements（）
显然是mootools，而不是原生Javascript。这是jQuery还是？好的，让我们假设现在有一个悬停效果，像这个ul#主菜单li a：悬停，使用你的代码，悬停不再工作了。如何更改悬停颜色？它不起作用，因为JavaScript将颜色覆盖放置在元素本身上，而不是更改
.CSS
文件中的CSS类。如果您希望这样做，您需要使用JS更改悬停时的颜色，或者使用JS添加一个定义颜色样式的类，该颜色样式可以被
：hover
样式覆盖var anchors = document.querySelectorAll('ul#main-menu li a');

for(var i = 0, len = anchors.length; i < len; i ++) {
    anchors[i].style.color = 'red';
}

var lis = document.getElementById('main-menu').children;

Array.prototype.forEach.call(lis, function(li) {
    var anchors = li.getElementsByTagName('a');
    Array.prototype.forEach.call(anchors, function(a) {
        a.style.color = 'green';
    });
});

$('#main-menu li a').css('color':'Red');