How to load css files with AJAX using jQuery

Bookmark and Share
July 22, 2010 Category: Tutorials, css, jQuery Tips

This week I was building a music player widget with jQuery and decided to make multiple skins available for people to choose from.

I figured I needed to dynamically load the css files with AJAX when the widget is initialized.

This is what I came up with:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$.ajax({
		url:"style.css",
		success:function(data){
			 $("<style></style>").appendTo("head").html(data);
		}
	})
})
</script>

2 comments so far

Open source portfolio

Reply

Wow, I searched for that for a while but it's so simple. Thanks!!!

Clovis Six

Reply

This solution doesn't work for IE8. Did you find a workaround for that by any chance?

Add New Comment




Your Comment