如何使用jQuery / Javascript修改外部CSS文件的属性

Question

我想使用javascript/jquery更改外部CSS文件的属性

例; 在我正在使用的网页中：

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

我想访问和更改特定样式的颜色（在外部CSS中找到）：

存在使用JavaScript或jQuery执行此操作的方法？

Answer 1

我创建了一个js方法来实现这个目的：

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;
}

要仅更改任何属性，需要以下内容：

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

Answer 2

好吧，让我们分析一下....

您想要更改代码上的CSS规则。 我想你想做它作为对浏览器中发生的事情的回应...

物理上改变CSS文件中的行是不可能的，但我认为它不是你想要的。

最好的选择，可能是通过javascript更改CSS样式，作为对您想要更改样式的事件或情况的反应。 使用jquery：

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

作为替代方案，对不同的元素状态使用不同的CSS类，只需将类更改为js代码：

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

这将允许您直接修改单个元素样式，而不是更改每个原始的分类元素。