How to get a style property from a css class and set it to another css class?

Question

Is it somehow possible to get a style property from a css class that is not used anywhere?

I'd like to read for example the color property that I want to apply to an animation with jquery ui but I want to avoid duplicating them again in the js code.

Let's say I have this:

.default-style {
   color: red;
}

.disabled-style {
   color: gray;
}

.current-style {}


<span class="current-style">Hello world!</span>

Now I would like to set the .default-style color to the .current-style and then animate the color from the .default-style to the .disabled-style and back on click but I don't know how to get them without creating a hidden element.

var currentColor = ""; // I'm stuck here. Get color from css class?
$("span.abc").animate({ color: currentColor });

You can get the value in correct way without cheating the javascript by StyleSheets property of javascript — Naveen Singh raghuvanshi
– Naveen Singh raghuvanshi, Commented Oct 19, 2014 at 17:43
@Naveen Singh raghuvanshi: This is true. I didn't know it. Writing my own loops for searching for the right css class however is not a pleasant task and I do not see any way to get a style by name like with jQuery. Of course I'm am able to write such a loop but I think it is unecessary. — t3chb0t
– t3chb0t, Commented Oct 19, 2014 at 17:52

T.J. Crowder · Accepted Answer · 2014-10-19 17:09:04Z

1

You can cheat by creating an element, applying the class, adding the element to the document, getting its color, then removing it. If this is all done in one code block, the user will never see the element:

var div = $("<div>").addClass("default-style").appendTo(document.body);
var color = div.css("color");
div.remove();

Alternately, you can loop through document.styleSheets in the document, and loop through the rules of each stylesheet looking for the one that uses that simple class selector, then look at the styles that rule defines.

Gratuitous snippet: ;-)

var div = $("<div>").addClass("default-style").appendTo(document.body);
var color = div.css("color");
div.remove();
$("<p>The color is: " + color + " (the color of this paragraph)</p>").css("color", color).appendTo(document.body);

.default-style {
   color: red;
}

.disabled-style {
   color: gray;
}

.current-style {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="current-style">Hello world!</span>

Side note: jQuery's animate function doesn't animate colors natively, you need to add a plugin to do it (jQuery UI bundles one, but if you're not using jQuery UI, you can just use one of the plugins that does this, such as this one, directly).

edited Oct 19, 2014 at 17:09

answered Oct 19, 2014 at 17:01

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Amit Joki Over a year ago

Isn't var color =$("<div>").addClass("default-style").css("color"); enough?

T.J. Crowder Over a year ago

@AmitJoki: The computed style of an element depends on where it is in the document, so you can't get the computed style of an element without putting it in the document. (Try it and see what you get! :-) )

Mulan Over a year ago

@T.J.Crowder by that reasoning, wouldn't you want to insert the div sibling to the element in question? I mean, it's possible that cascading rules would apply different to the target element vs body.

T.J. Crowder Over a year ago

@naomik: Not if all we're doing is getting the color related to the rule shown in the question, nothing specific to the location in the document.

t3chb0t Over a year ago

I have a really hard time choosing one of the answers because I like bothe solutions. The short one because it's pretty short and yours because it's a nice trick :-)

|

T.J. Crowder · Accepted Answer · 2014-10-19 18:44:34Z

1

Correct Way ! Without cheating the document

var currentColor;
var styleSheets = document.styleSheets;
for(var j=0; !currentColor && j<styleSheets.length; j++)
{
    var styleSheet = styleSheets[j];
    var cssprops = styleSheet.cssRules || styleSheet.rules; // .rules is for older IE
    for (var i = 0; i < cssprops.length; i++) {
        if(cssprops[i].selectorText == '.default-style');
            currentColor = cssprops[i].style.getPropertyCSSValue('color').cssText;
    }
}
$("span.abc").animate({ color: currentColor });

Reference From https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

edited Oct 19, 2014 at 18:44

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Oct 19, 2014 at 17:50

Naveen Singh raghuvanshi

1691 silver badge13 bronze badges

3 Comments

T.J. Crowder Over a year ago

Normally deleting a downvoted answer and then posting a new one is suspicious, but in this case, this answer is so completely different from the one that was originally downvoted, I was thinking I might suggest that you do it. :-)

T.J. Crowder Over a year ago

Some notes: 1. References are nice. 2. You don't put ; after for loops. 3. It's important to declare variables. 4. Older IE uses rules rather than cssRules. 4. What if it's not the first style sheet in the dodument?

Naveen Singh raghuvanshi Over a year ago

Thanks, but due to less knowledge of english i was unable to understand his question. And due to downvotes i researched about it and got solution

Collectives™ on Stack Overflow

How to get a style property from a css class and set it to another css class?

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related