我正在向我正在构建的元素异步添加一些脚本和样式表，并希望将样式表全部分组到 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>
我正在使用
$("head").append("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");
它工作正常，但它会将它添加到我的 HEAD 部分的底部，如您在示例中所见。
我的强制症想要在我的第一个样式链接之前或最后一个样式链接之后添加它。
感谢您的关注。
最佳答案
这会将新的 link 放在 head 元素中的最后一个 link 之后。
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");
但是，如果您还没有链接，则不会添加新的链接。因此，您应该先进行检查:
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.
您应该决定 link 的确切放置位置。不同的位置可能会覆盖现有样式。
关于jquery 添加 css 到头部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12093509/