使用 javaScript 更改子类的 css 样式答案

【问题标题】：Change css style of a subclass with javaScript使用 javaScript 更改子类的 css 样式
【发布时间】：2013-09-02 16:57:41
【问题描述】：

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

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

【问题讨论】：

你能把你的html部分也显示出来吗

标签： javascript css class

【解决方案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

【讨论】：

【解决方案2】：

不使用 jQuery，这个 sn-p 将存储每个 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 元素中，这样会更好。

【讨论】：

好的，假设现在有一个像 ul#main-menu li a:hover 这样的悬停效果，使用您的代码悬停不再起作用。如何更改悬停颜色？
它不起作用，因为 JavaScript 将颜色覆盖放在元素本身上，而不是更改 .css 文件中的 CSS 类。如果你想让它工作，你要么需要使用 JS 来改变悬停时的颜色，要么使用 JS 添加一个定义你的颜色样式的类，可以被覆盖采用:hover 风格。
类似$('#main-menu li a').hover(function() { $(this).toggleClass('red-text'); });
哦，我明白了.. 我只是在阅读有关使用 JS 更改悬停 css 属性的内容，每个人都说仅通过替换类是不可能的。如何使用 JS 更改悬停 css 样式？顺便说一句，我正在寻找一个非 jQuery 解决方案。
没有 jQuery，你真的不想走那条路。请参阅：stackoverflow.com/questions/6130737/mouseenter-without-jquery ...如果您使用原生 CSS 功能，并在需要时简单地添加/删除类，那就更好了。

【解决方案3】：

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

【讨论】：

您的代码不起作用，我使用 dw6 作为 IDE，它甚至没有显示方法 .getElements()
@SuciuLucian 啊，你是对的。 getElements() 显然是 mootools，而不是原生 Javascript。

【解决方案4】：

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

【讨论】：

这是一个 jQuery 还是...？