3

ほとんどのブラウザー (Firefox、Opera など) では、要素の計算された Style を取得すると、 type の nice オブジェクトが返されますCSSStyleDeclaration。Chrome 28 と PhantomJS 1.9 では、番号付きのキーですべての CSS プロパティをリストし、次にプロパティ (Chrome の場合) をリストするオブジェクトを取得します。

たとえば、オペラでは次のようになります。 ここに画像の説明を入力

Chrome 28 では: ここに画像の説明を入力

そして、最終的に役立つ部分に到達します。 ここに画像の説明を入力

PhantomJS 1.9 では、さらに悪いことに、番号付きの属性が取得され、その後、length と cssText の 2 つの名前付きプロパティのみが取得されます。

...
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 ) である必要があります。

オブジェクトは、数値のインデックス付きの値と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

getComputedStyleChrome では、プロパティ名を列挙します。一部の 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 に答える