Geek Answers Handbook

Save all css properties of an element using jquery

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

el.css();

and

 el.css("*");

Bad luck.

Is there any quick hint?

+7
jquery css-selectors
source share
2 answers

I updated the answer to be more efficient, while also providing a working demo ...

  $(function() { // element tag example p and element id function get_element_style(element, id){ var css = {}; $('<iframe id="get-style-'+id+'" style="display:none"/>').appendTo('body'); $('#get-style-'+id).contents().find('body').append('</'+element+'>'); $el = $('#get-style-'+id).contents().find('body').find(element); var defaults_css = $el.getStyles(); $('#get-style-'+id).remove(); var element_css = $('#'+id).getStyles(); for (var i in element_css) { if (element_css[i] !== defaults_css[i]) { css[i] = element_css[i]; } } return css; } var properties = get_element_style('p', 'test-p'); });

The problem with getting the style of an element is that you are not getting only the set value, as well as the default values. with this code, I am trying to get only the set values ​​of an element. this work with both inline and <style> and <link>

+6
source share

Do you mean:

 el.attr('style');

?

In addition, this may interest you:

How to get a list of all the attributes of a css element using jQuery?

+3
source share

More articles:


All Articles