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

Question

我想从class中读取样式，样式是在外部样式sheet中定义的。此外，我将动态添加外部 sheet。

如果它在同一个 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;
    }

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

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+"'"));

我无法阅读 class，标签 class 只有我能阅读。

Answer 1

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

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

Answer 2

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

（在将 link 元素添加到 head 之前定义加载处理程序很重要，因为添加后加载过程将开始）。

例子

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

$("head").append(
  $("<link rel='stylesheet' type='text/css'>")
    .attr("href", "http://cdn.sstatic.net/Whosebug/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/Whosebug/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
};

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

Read Style properties from external style sheet (from file)

html

javascript

css

jquery

stylesheet

例子