3

在大多数浏览器（例如 Firefox、Opera）上，获取元素的计算样式会返回一个不错的类型对象CSSStyleDeclaration。在 Chrome 28 和 PhantomJS 1.9 上，我得到一个以编号键开头的对象，列出所有 CSS 属性，然后是属性（如果是 Chrome）。

例如，在歌剧中： 在此处输入图像描述

在 Chrome 28 中： 在此处输入图像描述

然后最终你会得到有用的部分： 在此处输入图像描述

在 PhantomJS 1.9 中更糟糕的是，你得到了编号的属性，然后只有两个命名属性：长度和 cssText。

...
219: 'glyph-orientation-horizontal',
220: 'glyph-orientation-vertical',
221: '-webkit-svg-shadow',
222: 'vector-effect',
length: 223,
cssText: 'background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-o...
4

2 回答 2

1

在所有情况下返回的对象都应该是一个CSSStyleDeclaration实例（https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration）。

该对象只应该具有数字索引值和 a length（使其类似于数组）和cssText.

Chrome 实现添加了非标准的命名属性。如果你想要一个简单的属性/值对对象，你可以使用getPropertyValue实例上的方法。例如（大部分代码来自 MDN 上的示例）

function simpleStyles(node) {
  var style = window.getComputedStyle(node);
  var styleMap = {};
  for (var i = 0; i < style.length; i++) {
    var prop = style[i]; //the numbered props
    var value = style.getPropertyValue(prop); //access the value;
    styleMap[prop] = value;
  }
  return styleMap;
}

//or fancier

function simpleStyles(node) {
  return Array.prototype.reduce.call(window.getComputedStyle(node), function(map, prop, _, style) {
    map[prop] = style.getPropertyValue(prop);
    return map;
  }, {});
}
于 2016-04-29T15:09:33.007 回答
0

getComputedStyle在 Chrome 中枚举属性名称。一些 CSS 属性具有别名，因此通过同一结构中的数组或哈希访问别名提供了两全其美的效果。

使用JSON.parse和JSON.stringify标准化跨浏览器的值：

    var foo = getComputedStyle(document.body);
    
    console.log(JSON.parse(JSON.stringify(foo), function(key, value){ if (/[0-9]+/.test(key)) return undefined; else return value; }) )

参考

于 2015-07-30T19:36:08.240 回答