如何動態改變CSS風格？

Question

我有簡單的元素：

<a id="a1" href="#" style="position:absolute;top:0 ;left:0 ;nav-index:1;nav-down:#b1;nav-right:#a3;nav-left:#a1;nav-up:#a1">A1</a> 

如何只dynamicaly改變資產淨值指數和NAV-嗎？

Answer 1

像這樣：

var a1 = document.getElementById('a1'); 
a1.style['nav-index'] = /* somevalue */; 
a1.style['nav-up'] = /* somevalue */; 
// or (style properties with hypens must be converted 
// to a camel case representation for use in 'dot notation') 
a1.style.navIndex = /* somevalue */; 
a1.style.navUp = /* somevalue */; 
// and to retrieve the original values: 
a1.style['nav-index'] = ''; 
a1.style['nav-up'] = ''; 

而且它的最好的內聯樣式移動到一個類中的CSS文件。

.a1nav { 
position:absolute; 
top:0; 
left:0; 
nav-index:1; 
nav-down:#b1; 
nav-right:#a3; 
nav-left:#a1; 
nav-up:#a1; 
} 

Answer 2

document.getElementById('a1').style.navIndex = newIndex; 
document.getElementById('a1').style.navUp = newValue; 

注意，按照this和this，nav-index和nav-up只被Opera支持。

Answer 3

創建一個新的CSS和使用這樣

function changeClass (elementID, newClass) { 
    var element = document.getElementById(elementID); 

    element.setAttribute("class", newClass); //For Most Browsers 
    element.setAttribute("className", newClass); //For IE; harmless to other browsers. 
} 

Answer 4

您可以使用jQuery來改變導航索引和導航式調用它們。

$('a#a1').attr('nav-index', '2'); //If you want to change it to 2. 
$('a#a1').attr('nav-up', '#5'); //If you want to change it to #5.