Save all css properties of element using jquery

Question

I'm basically trying to save all current css properties of an element in a local var/array. I tried :

el.css();

and

el.css("*");

With no luck.

Is there any quick tip do to so ?

Answer 1

Do you mean:

el.attr('style');

?

Also, this might interest you:

http://stackoverflow.com/questions/1471118/how-can-i-get-list-of-all-element-css-attributes-with-jquery

Answer 2

$(function() {
  var attr_arr = [];
  var el = document.getElementById("element_id");
  for (var i = 0; i < el.attributes.length; i++){
    attr_arr.push( el.attributes[i].nodeName +':'+ el.attributes[i].nodeValue );
  }

  var serialized_attributes = attr_arr.join(' , ');

  alert( serialized_attributes );

});​

Assuming you have an element like this ex.:

<input type="text" id="element_id" class="my_class" value="hello" />

output this

type : text , id : element_id , class : my_class , value : hello

GET STYLE ATTRIBUTE INTO ARRAY

$(function() {
    var parts = [];
    var elem = $('#element_id').attr('style');
    var hashes = elem.split(';');
    for (var i = 0; i < hashes.length; i++) {
        var hash = hashes[i].split(':');
        parts.push( hash[0] + ' : ' + hash[1] );
    }    
    var style_attribute = parts.join(",");  
    alert( style_attribute );
});​

Assuming your element like this:

<input style="border:1px solid #000;color:#444;" type="text" id="element_id" value="hello" />

output:

border : 1px solid #000 , color : #444