Menu
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.
387
Set a Single CSS Property and Value The css() method can take a property name and value as separate parameters for setting a single CSS property for the elements. The basic syntax can be given with: $(selector). css("propertyName", "value");
jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. When used to return properties: This method returns the specified CSS property value of the FIRST matched element.
Apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call. Here you can pass key as property and val as its value as described above.
It is possible to change the CSS property of an element by using a simple JavaScript API, but we try to complete this challenge using jQuery css() method. Syntax: $(). css(propertyname, value); $().
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.
118
you can use:
.prepend()
http://api.jquery.com/prepend/
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
