How modify a property of external CSS file using jQuery / Javascript

Question

I want to change a property of external CSS file using javascript/jquery

Example; in the of the web page I'm using:

<!-- Star rating -->
<link href="css/star-rating.min.css" rel="stylesheet" />

And I want to access and change the color of specific style (Found in the external CSS):

Exists a method using JavaScript or jQuery to do that?

Possible duplicate of How to create a <style> tag with Javascript — Paul Roub
– Paul Roub, Commented Nov 18, 2015 at 15:47

Bardo · Accepted Answer · 2015-11-18 16:34:55Z

1

Ok, let's analyze this....

You want to change a CSS rule on your code. I asume you want to do it as a response to something that happens in the browser...

Change physically the line in the CSS file is not impossible, but I supose that it isn't what you are looking for.

The best option, probably would be to change the CSS style through javascript as a reaction to the event or situation that makes you want to change the style. Using jquery:

$(".rating-container").css("color", "#f0f");

As an alternative, use different CSS classes for different element states and just change classes into your js code:

$("#myAffectedElement").removeClass("oldColorClass");
$("#myAffectedElement").addClass("newColorClass");

This will allow you to modify directly individual elements styles instead of changing every originally classed element.

answered Nov 18, 2015 at 16:34

Bardo

2,5233 gold badges26 silver badges44 bronze badges

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

Comments

MiBol · Accepted Answer · 2015-11-18 15:49:06Z

0

I create a js method to achieve this:

function getStyleSheet(cssName, rule) {
    for (i = 0; i < document.styleSheets.length; i++) {
        if (document.styleSheets[i].href.toString().indexOf(cssName) != -1)
            for (x = 0; x < document.styleSheets[i].rules.length; x++) {
                if (document.styleSheets[i].rules[x].selectorText.toString().indexOf(rule) != -1)
                    return document.styleSheets[i].rules[x];
            }

    }

    return null;
}

To change any property only is required the following:

getStyleSheet('star-rating', '.rating-container .rating-stars').style.color = "#AFAFAF";

answered Nov 18, 2015 at 15:49

MiBol

2,16511 gold badges41 silver badges71 bronze badges

2 Comments

Anil Over a year ago

that's great..exactly i was looking for. Could you please help how can I download or copy the updated css to new file. TIA

James Fernandes Over a year ago

I have the same question, how can I download or copy the updated css to new file as I am unable to find these changes in sources also.

Collectives™ on Stack Overflow

How modify a property of external CSS file using jQuery / Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related