javascript - 从外部样式表(从文件)读取样式属性

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

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

(在将链接元素添加到 head 之前定义加载处理程序很重要，因为添加时加载过程将开始)。

例子

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

$("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
};

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

普通 JS 版本 -

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