用javaScript更改子類的css風格

如何用javaScript更改css風格的子類？用javaScript更改子類的css風格

爲了讓自己清楚假設我們有下面的代碼：document.getElementById('main-menu').style.marginLeft='10px';

那麼一個人如何可以改變：

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＃主菜單的保證金li a使用javaScript的顏色？

來源

2013-08-30 Suciu Lucian

你能證明也是你的HTML部分 –

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-30 04:24:01

您的代碼不工作，我使用dw6作爲IDE，它甚至不顯示方法.getElements（） –

@SuciuLucian啊，你說得對。 'getElements（）'顯然是mootools，而不是本地Javascript。 –

沒有使用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爲您的a元素添加一個類（可能類似於.higlighted-text），那麼它會更好，因此其行爲與您的願望類似。

來源

2013-08-30 04:26:20 Bryce

這個工程，你能再解釋一下它是如何工作的嗎？ –

當然，看我更新的答案。 – Bryce

好吧，讓我們假設現在有一個像這樣的懸停效果：ul＃main-menu li a：hover，使用你的代碼，懸停不再起作用。如何改變懸停顏色？ –

使用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

來源

2013-08-30 04:26:39

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

來源

2013-08-30 04:32:21

這是一個jQuery或...？ –

是的，這是jquerry –

用javaScript更改子類的css風格

回答

相關問題