我想从类中读取样式,而样式是在外部样式表中定义的。此外,我将动态添加外部工作表。
如果它在同一个 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+"'"));
我无法读取那个类,标签类只有我可以读取。
最佳答案
您可以使用 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
};
关于javascript - 从外部样式表(从文件)读取样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30322799/