Как получить стиль элемента в формате JSON?

Question

Я ищу функцию, которая дает мне JSON всех стилей, которые применяются к данному элементу в jquery

Я пробовал это , но не 'Кажется, что он работает на Firefox Ищет функцию, которая принимает элемент в качестве входа и возвращает JSON

Требуемый выход -

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

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

Answer 1

В первой строке мы берем все элементы, присутствующие в DOM, используя document.querySelectorAll("*") и создаем объект, который будет хранить все стили.Мы повторяем все элементы, используя цикл forEach, и сохраняем только те элементы, которые содержат style.Мы сохраняем имя тега элемента, в котором мы на данный момент находимся в цикле, и создаем объект с переменной name элемента внутри исходного объекта, который мы только что создали выше.Теперь с помощью 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/