如何使用javascript更改特定的CSS元素？

-1

任何意見將不勝感激，我敢肯定這對你們中的一些網站嚮導很簡單。非常感謝您的寶貴時間。如何使用javascript更改特定的CSS元素？

我有一些CSS是正在努力改變巴紐的顯示部分，當用戶將鼠標懸停在它：

.small_icons ul li.companyButton .circle {background-position:0 0;} 
.small_icons ul li.companyButton:hover .circle {background-position:0 -56px;}

我想，然後保持位置0 -56px用戶點擊時在用戶點擊不同的圖像時切換回0 0。這一切都發生在同一頁面上，所以我想我必須使用javascript onclick函數。

我似乎無法弄清楚如何使用JavaScript訪問特定的CSS元素。我試過了：

document.getElementByClass("circle").style.background-position:0 -56px;

但這並沒有改變任何東西。是否因爲.circle是.companyButton的子類，它是.small_icons的子類？

非常感謝！

來源

2012-12-12 Pajama

這不是有效的JS語法。甚至在問一個問題之前的第一步是[刪除你的代碼]（http://www.jslint.com/）。 – elclanrs

請接受任何答案，從長遠來看將幫助你SO賬戶 –

你搞砸型

document.getElementsByClass("circle")更多是Nodelist（object like array）。所以你應該循環通過它，或使用

document.getElementsByClass("circle")[0].style.background-position="0 -56px";

遍歷你需要

var circles=document.getElementsByClass("circle") 
for (var index=0;index<circles.length;index++) { 
    circles[index].style.background-position="0 -56px"; 
}

more約dinamyc造型

來源

2012-12-12 06:49:17

你需要做的

document.getElementsByClassName("circle")[0].style.backgroundPosition:0 -56px;

它here

來源

2012-12-12 06:49:05

如何使用javascript更改特定的CSS元素？

回答

相關問題