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

Question

是否有可能从未在任何地方使用的 css 类获取样式属性？

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

假设我有这个:

.default-style {
   color: red;
}

.disabled-style {
   color: gray;
}

.current-style {}


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

现在我想将 .default-style 颜色设置为 .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在文档中，循环遍历每个样式表的规则，寻找使用该简单类选择器的样式表，然后查看规则定义的样式。

免费片段:;-)

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 )。