how to get all css properties using jquery

0
votes

I have divs. They can be drag, resizable and i have a div editor.That means i can change any div width,height,margin,padding and it background-color,font-size,font-weight etc.I done this using jquery and i did it perfectly.Now what i want to know How i get all css properties with the each div.

When i done using jquery each div element,style properties changing...

element.style{
width:250px;
height:35px;
top:233.23px;
left:33.12px;
background-color:#000;
font-size:16px;
font-weight:600;


}

like that.So i want to get all above values to the jquery object to create json file.How can i achieve this ?

2
javascriptjqueryjsonhtml
have you tried using jquery.css() ?? – bipen
Created a fiddle: jsfiddle.net/tymeJV/TFaZ3 -- From this answer: stackoverflow.com/questions/754607/… – tymeJV
@bipen no i didn't try it yet – Dilini Wasana

2 Answers

2
votes

Based on this answer: Can jQuery get all CSS styles associated with an element?

Here's a demo: http://jsfiddle.net/tymeJV/TFaZ3/

The result console.log(css($(".test"))); == Object {600: "", width: "250px", height: "35px", top: "233.23px", left: "33.12px", background-color: "rgb(0, 0, 0)"…}

Seems to accomplish what is needed.

0
votes

You use must first set a class with CSS and then use 'addClass' instead of 'css' with jQuery. See the example I have below:

.class {margin:0; padding:0; text-align:center; }

And then you jQuery would look something like this: