4

如何使用 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;
}

我可以使用以下代码更改 ul#main-menu 的边距：document.getElementById('main-menu').style.marginLeft='10px';

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

4

4 回答 4

2

使用选择器 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 演示

于 2013-08-30T04:26:39.880 回答
1

在不使用 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，从而使其行为符合您的意愿，那就更好了。

于 2013-08-30T04:26:20.977 回答
0 
$('#main-menu li a').css('color':'Red');
于 2013-08-30T04:32:21.130 回答
0 
document.getElementById('main-menu').getElements("li a").style.color="some_color";
// Or simply
document.getElements("#main-menu li a").style.color="some_color";
于 2013-08-30T04:24:01.060 回答