计算样式作为JavaScript对象

Question

使用Window.getComputedStyle()可以使用getPropertyValue(propertyKey)获取任何属性的计算propertyValue。

想知道是否有任何方法可以返回包含所有计算出的propertyKey: propertyValue

的JavaScript对象

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

与Chrome开发工具类似的东西

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

谢谢！

Answer 1

虽然我不知道预先滚动的功能可以为我们完成工作，但抓住你所说的所有属性是相当简单的。

这是一些可以实现它的代码。首先，我们定义一个函数，它将为非数组对象提供forEach功能。接下来，我们在最终迭代返回的CSSStyleDeclaration对象的集合之前获取目标元素的computedStyle，将属性名称和值添加到我们稍后返回的对象中。

"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（）方法返回CSSStyleDeclaration集合。

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

试试这个：

＆＃13;

＆＃13;

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]})
 },{})
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;