Programmatically Retrieve StyleSheet Url’s Referenced in your Page using JavaScript

I came across a requirement where the stylesheets referenced by a page had to be listed. The user was then given the ability to disable the stylesheet he did not want. Here’s how we can use the document.styleSheets collection to retrieve the collection of styleSheet objects that are referenced using a <link> and then disable the stylesheet the user does not desire. A portion of the code is as given here:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title></title>
<
link href="CSS/FloatDes.css" rel="stylesheet"
title="Float layout" type="text/css" />
<
link href="CSS/RoundCorners.css" rel="stylesheet"
title="Rounded Corners" type="text/css" />

<
script type="text/javascript">
for
(i = 0; i < document.styleSheets.length; i++) {
alert(document.styleSheets[i].title);
alert(document.styleSheets[i].href);
}
</script>
</
head>
<
body>

</
body>
</
html>



Similarly, if you have imported stylesheets using @import, you can access the style sheets using document.styleSheets[i].imports.

To disable a stylesheet programmatically, use this piece of code:

document.styleSheets[i].disabled = true;

To check if the styleSheet collection is supported on your browser, use this :

 if (typeof document.styleSheets != "undefined")



This code has been tested on IE7 and Firefox 3

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: