在javascript中将document.stylesheets转换为路径数组

Question

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

我正在检查某些样式表是否存在的部分。 MDN 有这样的说法，“[StyleSheetList] 是一个类似数组的对象，但不能使用 Array 方法迭代。但是它可以......转换为一个数组。” 它们包括一个示例，其中将对象转换为一系列规则，但我没有看到获取路径的明确方法。 它还说“styleSheetList[index]”是一种可以访问的方式。 我尝试创建这个函数，但它不起作用，总是返回 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 循环中的 mysheets[i] 的 console.log 返回......

// 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检查一个哈希值，而不是每次都遍历每个样式表。