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?
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.
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";