动态加载样式表时，cssRules显示为空

Dynamically loading stylesheets, cssRules is coming up as null

本文关键字：cssRules 显示 加载 样式 动态      更新时间：2023-09-26

我试图动态加载一个样式表，并检查何时它准备好与cssRules属性，但它即将为空，我看不出为什么。(铬)

下面是一个例子:

http://jsfiddle.net/PeSqR/

var href = "http://twitter.github.io/bootstrap/assets/css/bootstrap.css";
var link = document.createElement('link');
link.setAttribute('href', href);
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
var intervalId = setInterval(
    function(){
        try{
            //console.log(link.sheet);
            //console.log(link.sheet.cssRules);
            if(link.sheet && link.sheet.cssRules.length){
                clearInterval(intervalId);
                clearTimeout(timeoutId);
            }
        }
        catch(e){
            //console.log('err...' + e.message);
        }
    },
10);
var timeoutId = setTimeout(
    function(){
        clearInterval(intervalId);
        clearTimeout(timeoutId);
        alert('ERROR');
    },
5000);
document.getElementsByTagName('head')[0].appendChild(link);

谢谢你的帮助。

您最好的选择是在link.sheet上运行null检查，因为试图访问link.sheet.cssRules属性会返回此错误:

[例外……"操作不安全" code: "18" nsresult: "0x80530012 (SecurityError)" location: " "]

试试这个检查:

if (link.sheet != null)
相关文章：