如何通過style屬性顯式設置css屬性？

Question

如何通過style屬性顯式設置所有CSS屬性？

Answer 1

比方說，你想要得到的樣式命名爲「MYP」的元素：

var stylez = document.getElementById("myp").style; 
var ix; 
for (ix = 0; ix < stylez.length; ++ix) { 
    console.log(stylez.item(ix) + ": " + stylez.getPropertyValue(stylez.item(ix))); 
} 

工作JSFiddle here產生輸出：

font-weight: bold 

只有在風格上的信息輸出，即使類設置字體大小，CSS直接應用背景顏色。

你也可以閱讀樣式屬性文本並自己解析它，這是不太準確的，但如果你想包含無效的語句，你需要這個。

Answer 2

元素 .style.cssText返回元素的樣式屬性的文本值

Answer 3

我不認爲有一個真正的跨瀏覽器的方式做到這一點，我不知道你是否真的需要得到這些財產。但是你可以迭代元素的style屬性的屬性。問題是，在某些瀏覽器上，style屬性具有類似數組的屬性和`cssText'屬性。你可以明確地把它們（見jsfiddle）：

var s = document.getElementById('s'); 
var styles = document.getElementById('myp').style; 
var prop, value; 
function CSSify(val) { 
    var i, ch; 
    var css = ''; 
    for(i = 0; i < val.length; i++) { 
    ch = val.charAt(i); 
    if(ch.toUpperCase() === ch) { 
     css += '-' + ch.toLowerCase(); 
    } else { 
     css += ch; 
    } 
    } 
    return css; 
    } 
for(prop in styles) { 
    value = styles[prop]; 
    if(typeof value === 'string' && value !== '' && prop !== 'cssText' && 
    isNaN(parseInt(prop))) { 
    s.innerHTML += CSSify(prop) + ': ' + value + '<br>'; 
    } 
}​ 

然而，瀏覽器在他們如何解釋style屬性值，關於性或者說他們不認識的屬性值不同。 IE版本之間甚至存在差異：IE 9放棄了一個無法識別屬性名稱的屬性，而IE 7則放棄了一個屬性值無法識別的屬性。而且，IE似乎添加了accelerator: false。