【问题标题】：Read Style properties from external style sheet (from file)从外部样式表中读取样式属性（来自文件）
【发布时间】：2015-07-31 02:44:43
【问题描述】：

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

如果它在同一个 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+"'"));

我无法阅读那个类，只有我能阅读的标签类。

【问题讨论】：

标签： javascript jquery html css stylesheet

【解决方案1】：

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

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

示例

我提取了属性以使其更具可读性，根据需要进行修改 - （记住还要处理错误，即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
};

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

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

【讨论】：

【解决方案2】：

问题是在将样式表附加到标题之后，它还没有加载。即使 JavaScript 还没有准备好，它也会继续运行。

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

【讨论】：