3

I am looking for a function that gives me the JSON of all the styles that are applied on the given element in jquery

I have tried this but doesn't seem to work on Firefox Looking for a function that takes an element as an input and returns the JSON

Required out put is 

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

},
'content-area' : {
 'color' : '#000000',
 'width' : '50%',
}
}
Kamalesh M. Talaviya
  • 1,422
  • 1
  • 12
  • 26
baig772
  • 3,404
  • 11
  • 48
  • 93
  • The [second solution](/a/6416527/3634538) in the link [should work](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#Browser_compatibility), are you sure you have tried `window.getComputedStyle`? – Yom T. Feb 04 '19 at 05:22
  • I am looking for a JSON, this is only copying the style to another element – baig772 Feb 04 '19 at 05:40
  • 1
    So this function should take an array of element as well? What is `sidebar` and `content-area` BTW? Are those the classes or IDs? – Yom T. Feb 04 '19 at 06:47
  • Yes, the function should take an array of the elements. `sidebar` and `content-area` are the classes – baig772 Feb 04 '19 at 07:20
  • Can you please provide some example input of element in HTML. – Yom T. Feb 04 '19 at 07:23

2 Answers2

3

In the first line we take all the elements present in the DOM using document.querySelectorAll("*") and create an object which will store all the styles. We iterate all the elements using forEach loop and only keep the elements who contain some sort of style. We store the tag name of the element we are currently on in the loop and make an object with the element name variable inside the original object we just created above. Now with the help of Object.keys we get all the key(properties present in style) and then iterate this array with another forEach loop. We get all the properties in the style of that element even the unset ones, inside an if statement we only take the keys which have a value and are non numeric so we only get the property names(color, font-size etc). Inside the object with element tag name we add all the key values of the filtered style. In the end we print the object.

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>
ellipsis
  • 12,049
  • 2
  • 17
  • 33
1

Try using the jquery-json plugin

eg: 

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

Sample: http://jsfiddle.net/mattball/aT77q/

Mebin Joe
  • 2,172
  • 4
  • 16
  • 22
  • This helped me! My issue was I was trying to print the contents of style tag to console and wondering why it wasn't printing as a json object. Well, it is ***similar*** to json, but not the same. The solution was to get the innerHMTL instead of the innerText and then split the result on ';' as in your example. – Eric Hepperle - CodeSlayer2010 Jan 07 '23 at 15:37