Question

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

为了使自己清楚，我们可以说我们有以下代码：

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;
}

我可以使用代码document.getElementById('main-menu').style.marginLeft='10px';

更改ul＃main-menu的边距

那么如何使用javaScript改变li a的颜色？

Answer 1

使用Selectors API

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

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

使用普通的旧JavaScript：

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';
    });
});

jsFiddle Demo

Answer 2

如果不使用jQuery，此代码段将存储主菜单中每个a中可找到的每个li。然后，它将遍历每个项目并将其文本颜色设置为red。

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

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

如果你正在使用jQuery，你可以完成同样的事情：

$('#main-menu li a').css('color','red');

但是，请注意，使用JavaScript设置样式规则并不是一个好习惯，因为这是CSS的设计目的。如果您使用JavaScript将类（可能类似.higlighted-text）添加到您的a元素中，那样会更好，因此行为符合您的意愿。

Answer 3

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

Answer 4

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

使用javaScript更改子类的css样式

4 个答案: