#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    New Hampshire
    Posts
    116
    Rep Power
    12

    Post External JS & CSS


    Moifying css styles in html file with js is easy enough, but what external css with external js? I can't figure out how to reference the external style sheet with my js. Any one have an example piece of code? Thanks.

    Sean
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    Basically, it does not make a difference whether you're dealing with an external stylesheet or inside the document.
    Suppose, you have a stylesheet 'mystyle.css':
    Code:
    .myclass {
    	font-family: verdana, sans-serif;
    	font-size: 2em;
    	background-color: red;
    }
    You could manipulate it by using the following JavaScript code:
    Code:
    <script type="text/javascript">
    function changecss(myclass,element,value) {
    	var CSSRules
    	if (document.all) {
    		CSSRules = 'rules'
    	}
    	else if (document.getElementById) {
    		CSSRules = 'cssRules'
    	}
    	for (var i = 0; i < document.styleSheets.length; i++) {
    		for (var j = 0; j < document.styleSheets[i][CSSRules].length; j++) {
    			if (document.styleSheets[i][CSSRules][j].selectorText == myclass) {
    				document.styleSheets[i][CSSRules][j].style[element] = value
    			}
    		}	
    	}
    }
    and call this function with:
    Code:
    <div onclick="changecss('.myclass','backgroundColor','blue')">changecss</div>
    <div class="myclass">
    myclass content
    </div>
    Hope this helps,
    Jeroen
  4. #3
  5. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    i believe what would be even ezr would be to do this:
    Code:
    function changeCSS(cssFile)
    {
    cssLink.href=cssFile;
    }
    and then give your <link> tag an id of cssLink and when you call it, call it like so:
    onCLick="changeCSS('path_to_your_css_file.css')"
    http://terminal.ledohost.com/layout1.html is an example of mine

IMN logo majestic logo threadwatch logo seochat tools logo