计算样式作为 JavaScript 对象

Question

使用 Window.getComputedStyle() 可以使用 getPropertyValue(propertyKey).

获得任何属性的计算值属性

想知道是否有任何方法可以 return 一个 JavaScript 对象与所有计算的 propertyKey: propertyValue

{
  ...
  propertyKey: propertyValue,
  ...
}

类似于Chrome开发工具

的东西

如果不是我可能需要自己写。

谢谢！

Answer 1

虽然我不知道可以为我们完成这项工作的预滚动函数，但按照您的意愿获取所有属性是相当简单的。

这里有一些代码可以实现它。首先，我们定义一个函数，它将为我们提供非数组对象上的 forEach 功能。接下来，在最终遍历 returned CSSStyleDeclaration 对象的集合之前，我们获取目标元素的 computedStyle，将属性名称和值添加到我们稍后 return.[=13 的对象中=]

"use strict";

// useful for NodeList & HtmlCollection types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
  var computedStyle = getTheStyle( document.getElementById('elem-container') );
  alert("Element has a height of: " + computedStyle.height + "\n" + "And a position of: " + computedStyle.position);
}

function getTheStyle(tgtElement)
{
 var result = {}, properties = window.getComputedStyle(tgtElement, null);
 forEach(
   properties, 
   function(prop)
   {
    result[prop] = properties.getPropertyValue(prop);
   }
  );
 console.log(result);
 return result;
}

 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }

<div id="elem-container">dummy</div>
<div id="output"></div>

Answer 2

Window.getComputedStyle() 方法 returns 一个 CSSStyleDeclaration 集合。

这是一个包含声明的对象，indexed properties，如果你想创建一个声明的对象，你只需要过滤掉索引属性，

试试这个：

var el = document.querySelector('#elem-container')
                                
var o = window.getComputedStyle(el)
var res = Object.keys(o).reduce((ac,x) => {
  if(isNaN(x))
    ac[x] = o[x];    
  return ac;
},{})



console.log(res)

console.log(camelToHyphen(res)) // also prefix moz and webkit


function camelToHyphen(s){
 return Object.keys(s).reduce((ac, x) => {
   var k = x.replace(/[A-Z]|^webkit|^moz/g, (c => '-' + c.toLowerCase() )) // converts  uppercase to - and lowercase
  
   return Object.assign(ac, {[k] : s[x]})
 },{})
}

#elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }

<div id="elem-container">dummy</div>

计算样式作为 JavaScript 对象

Computed style as a JavaScript object

html

javascript

css

dom

javascript-objects