Изменение стиля css подкласса с javaScript

Question

Как можно подклассом стиля CSS можно изменить с помощью javaScript?

Чтобы сделать себе ясно, скажем, у нас есть следующий код:

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

Так как можно изменить цвет li a с использованием javaScript?

Answer 1

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

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

Использование 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 4

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