Sometimes you may want to load a CSS stylesheet dynamically after your HTML page has loaded and certain conditions are met (for example, if an element with a specific class exists in the DOM). jQuery can help you accomplish that with only a few lines of code.
How to get there:
The HTML:
For this example, let’s say we need to load a stylesheet to format a div tag in the following HTML code:
<html> <head> <title>jQuery - Load CSS</title> </head> <body> <div id="container" class="class"> <p>This is a div tag that was formatted using <a href="http://www.jquery.com" alt="Link to jQuery.com">jQuery</a> </p></div> </body> </html>
The CSS:
This will be the CSS code in our sample stylesheet, “style.css”:
#container{
border: 1px solid #000;
background-color:#EEE;
padding:8px;
margin:8px;
width: 200px;
}
The jQuery:
These are the jQuery functions we’ll use to get this done:
- $() wrapper: as the main and most powerful jQuery function, we’ll use it to:
- Execute code once the document has been loaded
- Determine whether the #container div element exists in the DOM and, if true,
- Create new HTML to link the style.css stylesheet to our page
- append(): this jQuery function allows you to append new HTML code to any element in the DOM. For this example, we’ll attach a new <link> element to the <head> element of our document.
Bringing it all together:
With our HTML and CSS files in place, let’s get this done:
Load jQuery
- Add the following code between the </body> and </html> tags in your HTML document (Note: your actual path might be different than the one on this example, depending on where your jquery.js file has been stored)
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
Add the jQuery code
- Right under the last line, add the following code:
<script type="text/javascript">
$(document).ready(function(){ //Once the document is ready, run the following code
if($("#container").size()>0){ //Check if at least one element with the id "#container" exists within the DOM
$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />")); //if true, append the new <link> element to the <head> element in oor HTML page }
});
</script>
* * * UPDATE * * *
Domenico Testa pointed out that the approach above doesn’t work correctly in IE. IE needs the document.createStyleSheet() function to attach new stylesheet after loading the page:
document.createStyleSheet('style.css');
So, the final code should be:
<script type="text/javascript">
$(document).ready(function(){
if($("#container").size()>0){
if (document.createStyleSheet){
document.createStyleSheet('style.css');
}
else {
$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
}
}
});
</script>
And that should be it. This technique is useful if your page has loaded and you want to load extra CSS files when certain elements exist in the DOM. This can help you save some bandwidth and make your page load faster.
This example does not work as expected under Internet Explorer.
I’m testing using version 8 but i guess it will not work on former versions either.
Hi Domenico,
You are right, the original script didn’t work correctly. IE needs new stylesheets to be added to the DOM via document.createStylesheet(). Please see the updated portion of this post above for the rest of the code.
Thanks!
Holy cow! This is the only solution for IE that I have been able to find the on the web, thanks!!
Thanks, Neil! I’m glad you found it helpful!
this article is safe my life!!! . Thank you !!
You are welcome!
Thanks for sharing, very useful!
Hi Jared, you are welcome!
Hi, it’s work fine. Tks
Cool! You’re welcome!