Question

我动态地将.css文件附加到页面。如果.css文件已经在链接中，这是否重要？如何检查链接是否已经存在，我想用javascript检查头部。以下是我如何附加课程：

<script type="text/javascript">
(function(){
    var AppendNewStyle = document.createElement("link");
    AppendNewStyle.setAttribute("href", "/Content/Extras.css");
    AppendNewStyle.setAttribute("rel", "stylesheet");
    AppendNewStyle.setAttribute("type", "text/css");
    $('head')[0].appendChild(AppendNewStyle);
})();
</script>

我可以在这里查看该文件是否已经存在，或者我是否只是不担心有两个链接？

Answer 1

链接元素上的load event有模糊支持，error event更糟糕。虽然您可以通过这种方式动态加载它，但此方法并不可靠。

动态加载CSS样式的唯一可靠方法是通过AJAX，利用AJAX成功和失败事件，并在成功的AJAX之后添加链接。

对于已加载的样式，您可以检查所有链接元素的所有URL，并将它们与要加载的CSS进行比较。

var links = document.getElementsByTagName('link'),
    linksLen = links.length,
    i;

for(i=0;i<linksLen;i++){
    if(links[i].href.indexOf(urlToLoad) !== -1){
        //found
    }
}

Answer 2

您应该能够像任何其他元素一样查询这些链接元素。因为你正在使用Jquery：

var allLinks = $("link");

此外，您可以使用属性选择器查找您关注的链接：

var myLink = $('link[href="' + url +'"]');  //Find the link that matches your URL

如果你在一个脚本标签中执行此操作，该标签位于链接标记的下方，那么你应该没有任何计时问题。

2017-04编辑：

模板文字使这甚至更加漂亮！

var myLink = $(`link[href="${url}"]`)

对你而言，Jquery在那里讨厌：

var myLinks = document.querySelectorAll(`link[href="${url}"]`)

Answer 3

我使用简单的方法来检查已存在的css文件如果没有那么通过向css链接提供ID来加载

 var cssSelector = document.getElementById("uiCss");

    // Load UI CSS file
    if (!cssSelector) {
        var filename = 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css';
        var fileref = document.createElement("link");
        fileref.setAttribute("href", filename);
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("ID", "uiCss");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }

在添加之前检查css href链接是否存在

3 个答案: