ビルドしているプロジェクトにいくつかのスクリプトとスタイルシートを非同期で追加しており、スタイルシートをすべて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'>");
これは正常に動作しますが、例でわかるように、my HEADセクションの下部に追加されます。
私のOCDは、最初のスタイルのリンクの前または最後のスタイルのリンクの後に追加したいと考えています。
見てくれてありがとう。
これにより、新しいlink
がlink
要素の最後のhead
の後に配置されます。
$("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);
}
私のOCDは、最初のスタイルのリンクの前または最後のスタイルのリンクの後に追加したいと考えています。
link
を配置する場所を正確に決定する必要があります。別の位置が既存のスタイルをオーバーライドする可能性があります。