Question

我在java脚本中有一个动态的代码来分析页面上的样式表。我有大部分工作，但我有一个挂机...

我检查某些样式表是否存在的部分。 MDN对此有所说明，＆＃34; [StyleSheetList]是一个类似数组的对象，但不能使用Array方法进行迭代。但它可以......转换为数组。＆＃34;它们包含一个示例，他们将对象转换为一系列规则，但我没有看到明确的方法来获取路径。它还说＆＃34; styleSheetList [index]＆＃34;是一种可以访问的方式。我尝试创建这个函数，但它不起作用，总是返回false ...

function checkStyleSheet (styleSheetPath){
    var mysheets=document.styleSheets;
    for (var i = 0, max = mysheets.length; i < max; i++) {
        if (mysheets[i].href == styleSheetPath){
            return true;
        }
    }
    return false;
}

由于

JFiddle https://jsfiddle.net/3jsvbwrv/

修改在for循环中的console.log of mysheets [i]返回...

// CSSStyleSheet → http://example.com/example.css
CSSStyleSheet { 
    ownerRule: null,
    cssRules: CSSRuleList[1],
    type: "text/css",
    href: null,
    ownerNode: <style>,
    parentStyleSheet: null,
    title: "",
    media: Object[0],
    disabled: false 
}

编辑2： 注意：在if语句中将mysheets [i] .href更改为mysheets [i]并不能解决问题。仍然会发现example.css为false。

编辑3： 我觉得它不应该产生任何影响，但是为了防止它有用，或者提供更广泛的概述，或者帮助上下文......通过这个函数首先包含CSS脚本（经过验证可以工作）......

function addStyleSheet (styleSheetPath){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = styleSheetPath;
    document.getElementsByTagName("head")[0].appendChild(link);
}

我的最终目标是让这项工作......

function requireStyleSheet (styleSheetPath){
    if (!checkStyleSheet(styleSheetPath)){
        addStyleSheet(styleSheetPath);
    }
}

编辑4 我的测试html：

<button onmousedown="addStyleSheet('htt://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css')">Step1‌</button>
<button onmousedown="requireStyleSheet('http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css')">S‌tep 2</button>

编辑5 正如一些测试人员所说，代码按原样运行。事实证明，我的问题是在我的第二个函数试图检查其存在之前，被调用的文件没有完成加载。

Answer 1

我知道这是一个老问题，但它也是我寻找相同内容时的第一个搜索结果。我猜 Javascript 有一些新技巧，因为这就是我现在的工作：

[].slice.call(document.styleSheets).map(e => e.href)

Answer 2

我在页面中使用有效的CSS文件作为参数运行代码，它返回true。在您的示例中，它看起来好像您正在尝试加载JS文件而不是CSS文件：

<button onmousedown="addStyleSheet('http://momentjs.com/downloads/moment.min.js')">Step1‌</button>
<button onmousedown="requireStyleSheet('http://momentjs.com/downloads/moment.min.js')">S‌tep 2</button>

也许您可能会考虑让checkStyleSheet检查哈希，而不是每次都循环遍历每个样式表。

在javascript

2 个答案: