Question

如何在我自己的网站上托管StyleSheet并使用该StyleSheet在另一个网站上使用JavaScript设置元素的样式，同时将我的StyleSheet中的所有CSS规则转换为某种数组？当我试图提醒规则时，我什么也得不到。

到目前为止我的代码：

var d = document;
var cssId = 'test';
var allRules = [];

if (!d.getElementById(cssId))
{
    var head  = d.getElementsByTagName("head")[0];
    var link  = d.createElement("link");
    link.id   = cssId;
    link.rel  = "stylesheet";
    link.type = "text/css";
    link.href = "http://consolution.dk/d12/Daniel/test.css";
    link.media = "all";
    head.appendChild(link);

    var rules = link.cssRules;

    for(var i = 0; i < rules.length; i++)
    {
        allRules.push(rules[i].selectorText);
        alert(allRules[i]);
    }
}

Answer 1

据我所知，<link>元素没有cssRules属性;而是在CSSStyleSheet上找到的document.styleSheets对象上找到的。

可能有坏消息，看起来跨网站政策适用且cssRules值为null（请参阅this fiddle）

Answer 2

在解决了一些代码后，我找到了一个解决方案。

var d = document;
var cssId = 'test';
var allRules = [];

if (!d.getElementById(cssId))
{

    var head  = d.getElementsByTagName("head")[0];
    var link  = d.createElement("link");
    link.id   = cssId;
    link.rel  = "stylesheet";
    link.type = "text/css";
    // link.href = "http://consolution.dk/d12/Daniel/test.css";
    link.href = "test.css";
    link.media = "all";
    head.appendChild(link);

    setTimeout(function() {

        var rules = document.styleSheets[document.styleSheets.length-1].cssRules;

        for(var i = 0; i < rules.length; i++)
        {
            allRules.push(rules[i].selectorText);
            alert(allRules[i]);
        }
    }, 2000);

}

首先，您无法立即访问样式表，我将2秒超时（但您可以减少）。
我使用document.styleSheets[document.styleSheets.length-1]来获取已加载的“最后一个”styesheet。
如果样式表位于不同的域中，则无效。

我只能在Firefox上使用它，但我希望它可以让你继续使用。

如何从外部StyleSheet获取所有规则

2 个答案: