如何以 JSON 格式获取元素的样式？

Posted 2023-05-08

【中文标题】如何以 JSON 格式获取元素的样式？

【英文标题】：How to get the style of an element in a JSON format?

【发布时间】：2019-06-27 20:31:34

【问题描述】：

我正在寻找一个函数，它为我提供JSON 中应用于jquery 中给定元素的所有样式

我尝试过this，但似乎不适用于Firefox 寻找一个将元素作为输入并返回 JSON

的函数

要求的输出是

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

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

【问题讨论】：

链接中的second solutionshould work，你确定你试过window.getComputedStyle？

我正在寻找一个JSON，这只是将样式复制到另一个元素

所以这个函数也应该接受一个元素数组？ sidebar 和 content-area BTW 是什么？这些是类还是 ID？

是的，该函数应该采用元素数组。 sidebar 和 content-area 是类

能否提供一些 html 元素的输入示例。

【参考方案1】：

在第一行中，我们使用document.querySelectorAll("*") 获取DOM 中存在的所有元素，并创建一个存储所有样式的对象。我们使用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>

【参考方案2】：

尝试使用 jquery-json 插件

例如：

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

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