jquery添加CSS到头

我正在异步地添加一些脚本和样式表到我正在构建的项目中，并且希望将样式表全部分组在HEAD中。jquery添加CSS到头

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

我目前使用

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

，工作正常，但它增加了我的头部分的底部，你可以看到的例子。

强迫症在我想在我的第一个样式链接之前或最后一个样式链接之后添加它。

感谢您的期待。

来源

2012-08-23 Deac Karns

这会在您的head元素中已存在最后一个link之后放置新的link。

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

但是，如果你不已经到位有link这不会添加新的link。因此，你应该先做检查：

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); 
}

在我的强迫症想之前我的第一个样式链接或最后一个样式链接后添加它。

您应该决定将link准确放置的位置。 Theres一个机会不同的位置可能会覆盖现有的样式。

来源

2012-08-23 14:08:00 Curt

很好的回答，看起来我们回答了在同一时间。但是，这会将其插入头部中最后一个链接元素之后，而不是按要求的最后一个样式表链接。 –

@blesh干杯，同样你的回答没有考虑到如果没有'link'元素已经发生了什么。 – Curt

呃，我正在删除我的答案，然后删除我的downvote。但是我会解决一些关于你的问题......我会在一个单独的变量中创建<链接字符串，所以它没有被声明两次，而且我也使用：last选择符而不是.last（），所以选择器正在选择我想要的，而不是无缘无故地进行两个方法调用。 –

你可以使用：

.prepend（）

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

来源

2012-08-23 14:08:12

jquery添加CSS到头

回答

相关问题