我要寻找的是给我的那些在JSON
给定元素上应用的所有样式的jquery
功能
我曾尝试this但似乎并没有对Firefox
寻找,它接受一个元素作为输入功能的工作并返回JSON
所需输出
{
'sidebar' : {
'background-color' : '#000000',
'width' : 'auto',
},
'content-area' : {
'color' : '#000000',
'width' : '50%',
}
}
在第一行中,我们采取全部的存在于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>
尝试使用jQuery的JSON插件
例如:
var styles = $('#element').attr('style').split(';'),
json = {style: {}},
style, k, v;