Saving current element styling to a variable with jQuery

Question

Suppose I have the following HTML snippet:

<style>
#testSubject{
  color: red;
  width: 200px;
}
</style>

<p id="testSubject">Hello, world!</p>

With jQuery / vanilla JS, is there any way to save the currently active styling of the element to a variable, so that it may be restored/used later?

ie: var testSubjectStyles = $('#testSubject').css('*');

now I have the variable testSubjectStyles, and can apply those stylings to any element.

Is it possible to do this? I've been playing around with jQuery's .css(), but that only seems to let you set stylings.

i have given a simple answer using .css() method of jquery to extract css of an element in to a variable and apply it to another element. — Sagi_Avinash_Varma, Apr 01 '14 at 19:22

score 0 · Accepted Answer · edited May 23 '17 at 12:31

You could use var yourvar=element.css(); to get an object containing all element specific standard markup. If you also need vendor markup, check out this more complex solution:

Taken from Here

function getStyleObject(stobj){
        var dom = stobj.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return stobj.css();
    }

Then just use var yourstyle=getStyleObject(source);

score 0 · Answer 2 · answered Apr 01 '14 at 19:20

0

Suppose you have to get backgroundColor of an element and apply it to another element

var testSubjectStyles = $('#testSubject').css('backgroundColor');
$("#anotherelement").css('backgroundColor',testSubjectStyles);

Hope this helps!

answered Apr 01 '14 at 19:20

Sagi_Avinash_Varma

1,489
11
23

Or you could just use `var yourvar=yourelement.css()` to get an object containing all markup for that element. – René Roth Apr 01 '14 at 19:35
@RenéRoth That would be an error... – epascarello Apr 01 '14 at 19:42
what made someone downvote my answer can anybody correct where i was misled – Sagi_Avinash_Varma Apr 01 '14 at 19:44
Seems like somebody was having a bad day and downvoting all answers. – René Roth Apr 01 '14 at 19:46

score -1 · Answer 3 · answered Apr 01 '14 at 19:18

-1

You can do it with JavaScript, you don't need to use jQuery.

var testSubjectStyles = $('#textSubject')[0].style;

That will give you a full CSSStyleDeclaration object, which includes all the css properties for the element.

answered Apr 01 '14 at 19:18

user3417400

341
2
4

does this just include CSS set via the `style=` attribute, or does it include CSS in external stylesheets? – tdc Apr 01 '14 at 19:23
It includes all the css properties active in the element, wherever they came from – user3417400 Apr 01 '14 at 19:36
2

Nope: http://jsfiddle.net/MkYj2/ – epascarello Apr 01 '14 at 19:41
isn't that jquery ? – Entretoize Nov 26 '18 at 11:51

Saving current element styling to a variable with jQuery

3 Answers3