Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    apply classes from a new external CSS

    I want to:
    1. Change dynamically an external CSS src. The new external have the same classes names, only the attributes have other values.
    2. Force the elements to use the new CSS attributes.

    1. That is simple

    document.getElementsByTagName('link')[0].setAttribute('src','newcss.css');

    But
    2. How can I "force" the elements to use the new values from the new external css file? Is this possible?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I managed to get it working like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function importStyle(add) {
    	var newTag = document.createElement("style");
    	newTag.setAttribute("type", "text/css");
    	newTag.appendChild(document.createTextNode("@import url("+add+");"));
    	
    	var oldTag = document.getElementsByTagName("style")[0];
    	oldTag.parentNode.replaceChild(newTag, oldTag);
    }
    </script>
    <style type="text/css">
    	@import url(css1.css);
    </style>
    </head>
    
    <body>
    <a class="foo" href="#" onclick="importStyle('css1.css');return false;">css1.css</a>
    &nbsp;&nbsp;
    <a class="foo" href="#" onclick="importStyle('css2.css');return false;">css2.css</a>
    <br><br>
    <a class="foo">Hello world</a>
    </body>
    </html>
    css1.css:
    Code:
    .foo { 
    	font-family: "Courier New", Courier, mono;
    	font-size: 12px;
    	color: #CC6600; 
    }
    css2.css:
    Code:
    .foo { 
    	font-family: "Courier New", Courier, mono;
    	font-size: 12px;
    	color: #006699; 
    }
    This is Gecko only, but I know a champion such as yourself can make it cross-dom compatible I gotta shimmey back to work.

    Hope this helps

    m_n
    Last edited by martin_narg; 08-18-2005 at 03:29 PM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    thanks a lot... I'll dig for a cross-browser solution as well...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •