如何获得一个元素的样式，以JSON格式？

Question

我要寻找的是给我的那些在JSON给定元素上应用的所有样式的jquery功能

我曾尝试this但似乎并没有对Firefox寻找，它接受一个元素作为输入功能的工作并返回JSON

所需输出

{
'sidebar' : {
    'background-color' : '#000000',
    'width' : 'auto',

},
'content-area' : {
 'color' : '#000000',
 'width' : '50%',
}
}

Answer 1

在第一行中，我们采取全部的存在于DOM元素使用document.querySelectorAll("*")和创建对象将存储的所有样式。我们反复使用的所有元素forEach循环，只保留谁含有某种style的元素。我们店我们目前是在环路中的元素的标记名称，并与我们刚创建的原始对象内部的元素名称变量的对象。现在，随着Object.keys的帮助下，我们得到的所有键（存在于样式属性），然后遍历这个数组与另一forEach循环。我们得到的所有特性，因为元素甚至是那些没有设置的风格，内部的if语句，我们只取其中有一个价值和是非数字，所以我们只得到了属性的名称（color，font-size等）的按键。与元素的标签名的对象中，我们添加了过滤样式的所有键值。最后，我们打印的对象。

var a=document.querySelectorAll("*")
var obj={};
a.forEach((e)=>{
if($(e).attr('style')!=null)
{
var k=$(e).prop('tagName')
obj[k]={};
Object.keys(e.style).forEach((t)=>{if(e.style[t]!="" && isNaN(t)){
obj[k][t]=e.style[t];
}})}})
console.log(obj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div name="div" id="a" style="background-color:green; font-size:20px">aaaa</div>
<span id="b" name="span" style="background-color:blue;font-size:27px">bbb</span>

Answer 2

尝试使用jQuery的JSON插件

例如：

var styles = $('#element').attr('style').split(';'),
    json = {style: {}},
    style, k, v;

示例：http://jsfiddle.net/mattball/aT77q/