javascript - Check to see if css ref link is present before adding one - Stack Overflow

admin管理员组

文章数量:1305972

I am dynamically appending a .css file to a page. Does it matter if the .css file is already in a link? How can I check to see if the link already exists, I thought of checking in the head with javascript. Here is how I am appending the class:

<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>

Can I throw a check in here to see if the file is already in the head or should I just not worry about having two linked?

I am dynamically appending a .css file to a page. Does it matter if the .css file is already in a link? How can I check to see if the link already exists, I thought of checking in the head with javascript. Here is how I am appending the class:

<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>

Can I throw a check in here to see if the file is already in the head or should I just not worry about having two linked?

• javascript
• jquery
• css
• dynamic

Share Improve this question Follow asked May 18, 2012 at 0:58 Travis JTravis J 82.3k4242 gold badges211211 silver badges279279 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

There is a fuzzy support for the load event on link elements and even worse for the error event. Although you can load it dynamically this way, this method is not reliable.

The only reliable way to load CSS styles dynamically is via AJAX, taking advantage of the AJAX success and fail events, and add the link after a successful AJAX.

---

As for an already loaded style, you can check for all urls of all link elements and pare them to the CSS to be loaded.

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

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

You should be able to query for those link elements like any other element. Since you're using Jquery:

var allLinks = $("link");

Furthermore, you could use an attribute selector to find the link you care about:

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

If you do this in a script tag that's below where the link tag should be, you shouldn't really have any timing problems.

---

2017-04 Edit:

Template literals make this even yummier!

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

And for all you Jquery haters out there:

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

I am using simple way to check css file already exist If not then Load by providing ID to css link

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

    // Load UI CSS file
    if (!cssSelector) {
        var filename = 'http://code.jquery./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);
    }

本文标签： javascriptCheck to see if css ref link is present before adding oneStack Overflow