"If at first you don't succeed; call it version 1.0" :-Unknown

Pages

Wednesday, September 15, 2010

defining css with javascript as per criteria

 Hi,

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")
 
If it is broken change the css  using javascript 
 This javascript demonstrates how you can programmatically 
reference a CSS link on a page. 
   <script type="text/javascript">
        function addCSS() {
            var headtg = document.getElementsByTagName('head')[0];
            if (!headtg) {
                return;
            }
            var linktg = document.createElement('link');
            linktg.type = 'text/css';
            linktg.rel = 'stylesheet';
            linktg.href = 'CSS/RoundCorners.css';
            linktg.title = 'Rounded Corners';
            headtg.appendChild(link);
        }
    </script>
</head>
<body onload="addCSS()"> 




Have a nice day... 'N happy Coding :)












Posted by








































No comments:











Post a Comment












        

      









Subscribe to:
Post Comments (Atom)