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。

如何通过style属性显式设置css属性？

3 个答案: