如何获得一个元素的样式,以JSON格式?

问题描述 投票:2回答:2

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

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

所需输出

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

},
'content-area' : {
 'color' : '#000000',
 'width' : '50%',
}
}
jquery css json css3
2个回答
1
投票

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

0
投票

尝试使用jQuery的JSON插件

例如:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.