3

我动态地将 .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>

我可以在这里检查文件是否已经在头部，还是我不应该担心有两个链接？

4

3 回答 3

5

对链接元素的事件有模糊的支持，对load事件的支持更糟。虽然可以通过这种方式动态加载，但这种方式并不可靠。error

动态加载 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
    }
}
于 2012-05-18T01:00:37.363 回答
4

您应该能够像任何其他元素一样查询这些链接元素。由于您使用的是 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}"]`)
于 2012-05-18T01:20:03.930 回答
1

我正在使用简单的方法来检查 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);
    }
于 2013-08-21T13:46:43.450 回答