实施例

Question

我想从类中读取样式，样式在外部样式表中定义。我还会动态添加外部工作表。

如果它在同一个html文件中，并且在标签内定义，我可以访问。

    function getStyle(className) {
        var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
        debugger;
        var styles="";
        for (var x = 0; x < classes.length; x++) {
            if (classes[x].selectorText == className) {
                styles=((classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText)+"\n";
            }
        }
return styles;
    }

但我需要从外部文件中读取所有类及其样式，我正在尝试如下

var classfl="anaglyph";
$("head").append("<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Rancho&effect="+classfl+"'>");

var clsname="font-effect-anaglyph";
alert(getStyle("'"+clsname+"'"));

我无法读取该类，我只能阅读标签类。

Answer 1

问题是在将样式表附加到标题后，它尚未加载。即使它尚未准备好，javascript仍在继续。

我认为这会有所帮助：jQuery Append CSS File and Wait until Loaded?

Answer 2

您可以使用onload处理程序加载它。当样式表完成加载时将调用此方法。从处理程序内部继续。

（在将链接元素添加到head之前定义加载处理程序非常重要，因为添加加载过程将会启动）。

实施例

我提取属性以使其更具可读性，并根据需要进行修改 - （记住也要处理错误，即onerror）。

＆＃13;

$("head").append(
  $("<link rel='stylesheet' type='text/css'>")
    .attr("href", "http://cdn.sstatic.net/stackoverflow/all.css")
    .on("load", cssLoaded)
);

function cssLoaded(e) {
  alert("wee...");    // the sheet has loaded, continue from here
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

香草JS版 -

＆＃13;

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.onload = cssLoaded;
link.href = "http://cdn.sstatic.net/stackoverflow/all.css";

// add to head to start loading...
document.getElementsByTagName("head")[0].appendChild(link)

function cssLoaded(e) {
  alert("wee...");   // the sheet has loaded, continue from here
};

＆＃13;

从外部样式表中读取样式属性（来自文件）

2 个答案:

实施例