Jquery add css to head

2019-01-23 04:41发布

站内问答 / jQuery
789 2 4

I am asynchronously adding a few scripts and style sheets to a project that I am building and would like to keep the style sheets all grouped together in the HEAD.

<head>
  <title>home</title>
  <meta charset="utf-8">
  <link rel="Shortcut Icon" type="image/ico" href="/img/favicon.png">

  <!-- STYLES-->
  <link rel="stylesheet" href="/css/fonts-and-colors.css" type="text/css" media="screen"> 
  <link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen">

  <!-- JS-->
  <script type="text/javascript" async="" src="/js/light-box.js"></script>
  <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/js/grade-button.js"></script>
  <script>
    $(document).ready(function() {
        // some code
    });
  </script>
  <link rel="stylesheet" href="/css/masterBlaster.css" type="text/css" media="screen">
</head>

I am currently using

$("head").append("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

which works fine, but it adds it to the bottom of my HEAD section as you can see in the example.

The OCD in me would like to add it either before my first style link or after the last style link.

Thanks for looking.

2条回答
干净又极端
2楼-- · 2019-01-23 05:01

you can use:

.prepend()

http://api.jquery.com/prepend/

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
3楼-- · 2019-01-23 05:09

This will place the new link after the last link already in your head element.

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

However if you don't already have a link in place this won't add the new link. Therefore you should do a check first:

var $head = $("head");
var $headlinklast = $head.find("link[rel='stylesheet']:last");
var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>";
if ($headlinklast.length){
   $headlinklast.after(linkElement);
}
else {
   $head.append(linkElement);
}

The OCD in me would like to add it either before my first style link or after the last style link.

You should decide where exactly the link is going to be placed. Theres a chance a different position might override existing styles.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)