1

如何找到通过 style 属性显式设置的所有 css 属性？

4

3 回答 3

2

假设您想要获取名为“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会产生输出：

font-weight: bold

仅输出样式中的信息，即使一个类设置了字体大小并且 CSS 直接应用了背景颜色。

您还可以阅读样式属性文本并自己解析它，这不太准确，但如果您想包含无效语句，则需要它。

于 2012-10-17T02:46:11.507 回答
1

element .style.cssText 返回element的 style 属性的文本值

于 2012-10-17T03:01:08.300 回答
0

我认为没有真正的跨浏览器方法可以做到这一点，我想知道你是否真的需要获得这些属性。但是您可以迭代元素属性的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.

于 2012-10-17T06:00:36.077 回答