如何通过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。