Question

以某种方式可以从css类中获取一个未在任何地方使用的样式属性吗？

我想阅读我想用jquery ui应用于动画的颜色属性，但我想避免在js代码中再次复制它们。

假设我有这个：

.default-style {
   color: red;
}

.disabled-style {
   color: gray;
}

.current-style {}


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

现在我想将.default风格的颜色设置为.current-style，然后将颜色从.default-style设置为.disabled-style，然后再点击，但我不知道如何在不创建隐藏元素的情况下获取它们。

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

Answer 1

您可以通过创建元素，应用类，将元素添加到文档，获取颜色，然后删除它来作弊。如果这一切都在一个代码块中完成，则用户将永远不会看到元素：

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

或者，您可以遍历文档中的document.styleSheets，并遍历每个样式表的规则，查找使用该简单类选择器的规则，然后查看规则定义的样式。

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>

旁注：jQuery的animate函数本身没有动画颜色，你需要添加一个插件来执行它（jQuery UI捆绑一个，但如果你不使用jQuery UI，你可以只使用一个执行此操作的插件，例如this one，直接）。

Answer 2

正确的方式！没有欺骗文件

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

来自https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets的参考

如何从css类获取样式属性并将其设置为另一个css类？

2 个答案: