Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    I was wondering if it is possible to change the external stylesheet using javascript. Also if this was possible would the page have to be reloaded before any changes could be seen.

    Thanks :classic:
    JR

  2.  

  3. #2
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    i have sorted it by doing this...
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="whatever.css" id="theme">
    <script type="text/javascript">
    function swapsheet() {
    	document.all.theme.href='whatever2.css';
    }
    </script>
    </head>
    <body>
    <a href="javascript:swapsheet()>Click to Swap Stylesheet</a>
    </body>
    </html>
    that worked without reloading the page

    i wondered if i could do it for netscape with the getelementbyid so i did this...
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="whatever.css" id="theme">
    <script type="text/javascript">
    function swapsheet() {
    	document.getelementbyid('theme').href='whatever2.css';
    }
    </script>
    </head>
    <body>
    <a href="javascript:swapsheet()>Click to Swap Stylesheet</a>
    </body>
    </html>
    but that didnt work - any ideas? thanks :classic:
    JR

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Interesting concept. Never tried it with just javascript.

    I think you might have a problem with it in Netscape because changing a stylesheet file won't specifically tell the elements to refresh. IE probably took that into consideration, since it dynamically refreshes everything all the time.

    what you might try doing is using document.write in the head or document.appendChild with DOM to dynamically add a stylesheet prior to generating the body.

    Once you're in the body, if you want to change styles, you might have to do a "refresh" on the elements for netscape to show the new styles.

    Let me play around and get back to you on this.

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Incidentally, I noticed in playing with the file that you did document.getelementbyid all lower case. Javascript is case sensitive.

    Try document.getElementById and see if that solves your netscape problem.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    This works for me in both IE and NS.

    Not sure if the loop is necessary though (did you try above?)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    	<head>
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="style1.css" id="theme">
    		<script type="text/javascript">
    		function swapsheet() {
    			//change the stylesheet
    			document.getElementById('theme').href='style2.css';
    			//Run a refresh loop
    			var elements = document.getElementsByTagName("*");
    			for (var i = 0; i < elements.length; i++) {
    				var elementClass = elements[i].className;
    				elements[i].className = '';
    				elements[i].className = elementClass;
    			}
    		}
    		</script>
    	</head>
    	<body>
    		<p>This is my test</p>
    		<a href="javascript:swapsheet()">Click to Swap Stylesheet</a>
    	</body>
    </html>

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    For posterity....

    I ran it without the refresh loop and it works fine... here's the code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    	<head>
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="style1.css" id="theme">
    		<script type="text/javascript">
    		function swapsheet() {
    			//change the stylesheet
    			document.getElementById('theme').href='style2.css';
    		}
    		</script>
    	</head>
    	<body>
    		<p>This is my test</p>
    		<a href="javascript:swapsheet()">Click to Swap Stylesheet</a>
    	</body>
    </html>

  8. #7
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    yes it worked :classic:, thanks man -

    i never knew javascript was case sensitive until i had spent doing an array for an over an hour today, not noticing what was wrong and it was that i hadn't put the damn capital A :angry: lol
    JR


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com