jQuery的新增CSS头 [英] Jquery add css to head
问题描述
我异步增加一些脚本和样式表，我构建和想保持样式表都在头组合在一起的项目。
＆LT; HEAD＆GT;
＆LT;标题＆GT;家庭和LT; /标题＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;链接rel =快捷方式图标类型=图像/ ICO的href =/ IMG / favicon.png＆GT; ＆LT;！ - 风格 - ＆GT;
＆LT;链接rel =stylesheet属性HREF =/ CSS /字体和-colors.css类型=文/ CSS媒体=屏幕＆GT;
＆LT;链接rel =stylesheet属性HREF =/ CSS / layout.css中类型=文/ CSS媒体=屏幕＆GT; ＆LT;！ - JS - ＆GT;
＆LT;脚本类型=文/ JavaScript的异步=SRC =/ JS /光box.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/ JS / jQuery的-1.7.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/ JS /年级button.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
//一些code
}）;
＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =/ CSS / masterBlaster.css类型=文/ CSS媒体=屏幕＆GT;
＆LT; /头＆GT;
我目前使用
$（头）追加（＆LT;链接相对=样式HREF =/ CSS / masterBlaster.css类型=文/ CSS'媒体='屏幕＆gt;中）;
这工作得很好，但它增加了我的头部分的底部，你可以看到的例子。
在我的OCD想无论是之前我的第一个风格链接或最后一个样式链接后添加它。
感谢您寻找。
这将会把新的链接最后链接后，已经在头元素。
$（头链接[相对='样式']）最后一个（）后（＆LT;链接相对=样式HREF =/ CSS / masterBlaster。 CSS'类型='文字/ CSS的'媒体=屏幕＆gt;中）;
不过，如果你不已经有一个适当的链接这不会添加新的链接。因此，你首先应该做一个检查：
变量$头= $（头）;
变量$ headlinklast = $ head.find（链接[相对='样式']：最后一个）;
VAR linkElement =＆LT;链接相对=样式HREF =/ CSS / masterBlaster.css类型=文/ CSS'媒体=屏幕＆gt;中;
如果（$ headlinklast.length）{
$ headlinklast.after（LinkElement）上;
}
其他{
$ head.append（LinkElement）上;
}
在我的OCD想无论是之前我的第一个风格链接添加
或者最后一个样式链接之后。您应该决定究竟在何处
链接将被放置。那里有一个机会，不同的位置可能会覆盖现有样式。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.
解决方案This will place the new
linkafter the lastlinkalready in yourheadelement.$("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
linkin place this won't add the newlink. 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
linkis going to be placed. Theres a chance a different position might override existing styles.这篇关于jQuery的新增CSS头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
