Results 1 to 3 of 3

Thread: Calling CSS in Javascript

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Calling CSS in Javascript

    in HTML you can call CSS

    Code:
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <tr><td class="cssHere">Display</td></tr>
    can you even call CSS in javascript?
    Code:
    document.writeln("<tr><td class="cssHere">" + Display + "</td></tr>");
    if so how do you even call the "style.css"

    thanks

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    One option is to include the stylesheet in your <head> section in the HTML. Then it will be waiting for any dynamically generated Javascript.

    If you need to load stylesheets dynamically (for example, different versions in different circumstances), then start here:
    http://www.google.com/search?q=dynam...ith+javascript
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    You can play around with:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Untitled</title>
    	<link href="styles/style.css" rel="stylesheet" type="text/css" />
    	<link href="styles/blue.css" rel="stylesheet" id="alt_blue" type="text/css" /> <!-- start off with this -->
    	<link href="styles/red.css" rel="alternative" id="alt_red" type="text/css" />
    	<script type="text/javascript">
    	var toggleStyle = function(id){
    		var newStyle = document.getElementById('alt_' + id);
    		if(newStyle == null) {
    			alert("Doesn't exist.");
    			return ;
    		}
    		for(var i = 0; i <= document.getElementsByTagName('link').length-1; i++){
    			if((document.getElementsByTagName('link')[i].id.substring(0,4) == "alt_")){
    				if(document.getElementsByTagName('link')[i].id != "alt_" + id){
    					document.getElementsByTagName('link')[i].rel = "alternative";
    				} else {
    					document.getElementsByTagName('link')[i].rel = "stylesheet";
    				}
    			}
    		}
    	};
    	</script>
    </head>
    <body>
    	<div id="page-wrap">
    		<h1>Hello World</h1>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sem magna, convallis et feugiat vitae, placerat in tortor. Nam fermentum, ligula ac sodales luctus, libero dolor rutrum nisi, ac porttitor velit elit et elit. Sed ac elit sed tellus interdum convallis. In dignissim est quis tortor blandit condimentum. Aliquam lacinia, leo id luctus mattis, augue lectus facilisis quam, sit amet fermentum felis lectus ac massa. Maecenas nisi mauris, porttitor non interdum at, lacinia vitae diam. Praesent in metus odio. Curabitur condimentum massa ac velit volutpat placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nibh vitae lectus commodo ornare. Sed ac lacus lacus, sed tempor eros. Morbi non lobortis ligula. Suspendisse elementum lorem sit amet diam feugiat tincidunt. Mauris eleifend nisi vitae velit viverra vel aliquet metus vulputate. Praesent orci ligula, ultrices vitae fermentum molestie, euismod ac lectus. Aliquam est ligula, sodales ut pharetra a, varius eget tortor.</p>
    		<div class="blue" onclick="toggleStyle('blue');"></div>
    		<div class="red" onclick="toggleStyle('red');"></div>
    	</div>
    </body>
    </html>
    Jeremy | jfein.net

Bookmarks

Posting Permissions

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