Question

我有一个使用canvas的JS库需要从CSS类中获取颜色。库使用的类是预先确定的，但哪个样式表（可能很多）不是。

有这样的课程：

.a_preset_class {
    margin: 10pt;
    color: rgba(216,34,21,0.5);
}

我希望能够写出这样的内容：

context.strokeStyle = getClassColor("a_preset_class");

并将context.strokeStyle设置为"rgba(216,34,21,0.5);"

显而易见的方法是遍历document.styleSheets，但我希望有一种不那么激烈的方式让我不知道。

Answer 1

var who= document.createElement('span');
who.className="a_preset_class";
var css= document.defaultView.getComputedStyle(who,'').getPropertyValue('background-color');

Answer 2

这是一个可以重复使用的功能......

function testrules(findrule)
{
 var myrules = document.styleSheets[0].cssRules;

 for (var i=0; i<myrules.length.length; i++)
 {
  if (myrules[i].selectorText==findrule) {alert('document.styleSheets[0].cssRules['+i+'] = '+myrules[i].cssText); break;}
 }
}

调用该函数......

<div><a href="javascript:testrules('a:hover');">what is a:hover?</a></div>

通过一些修改，您可以让它返回一个值，如果没有满足匹配规则则返回'0'。您还可以轻松地遍历多个样式表，并使用第二个for循环。

Answer 3

如果您能够在您的站点中使用Dojo，则可以使用dojox.data.CssRuleStore来创建所有CSS规则的可搜索存储。然后使用标准fetch（）方法搜索商店，使用样式规则的“selector”属性作为搜索词。如，

ruleStore = dojox.data.CssRuleStore(); // make it a global if it's not part of a widget
                                       // so that it's accessible by the other methods
                                       // below when calling ruleStore.getValue()
var rulesFound = [];

// When querying the store, you can either do an exact match search such as ".myClass",
// or do a wildcard-based search such as ".myClass*" (find all rules that start with
// ".myClass", "*.myClass*" (all rules containing ".myClass" somewhere in the selector),
// "?someValue" (any rules that have an arbitrary first character, followed by
// "someRule"), etc.
var queryObj = {"selector": ".a_preset_class"};

var checkEmpty = function(count, request) {
    if (count < 1)
        // do your empty response logic here
};

var processRule = function(item, request) {
    rulesFound.push(ruleStore.getValue(item, "style"); // Add the item's CSSStyleDeclaration object with all assigned values to the results array
};

ruleStore.fetch({query: queryObj, onBegin: checkEmpty, onItem: processRule});

使用此代码作为起点，您可以创建一个函数，将所需的搜索词作为参数，将其传递给查询，然后返回找到的CSS规则数组。然后，您可以在调用函数后迭代响应数组，并进行所需的任何更改。

通过JS从多个样式表中获取CSS类内容

3 个答案: