www.webdeveloper.com
Results 1 to 13 of 13

Thread: How to create CSS styles from within javascript?

  1. #1
    Join Date
    Dec 2006
    Posts
    16

    How to create CSS styles from within javascript?

    Hi, I'm new to javascript. I'd like to make a CSS style completely from within javascript. So far, I only know how to modify CSS styles in javascript. For example...
    Code:
    var myStyle = document.getElementById('myStyle');
    myStyle.style.height = '300px';
    myStyle.style.width = '300px';
    myStyle.style.display = 'block';
    However, I don't think this can actually create a CSS style. If anyone could help me out here, I would greatly appreciate it.

  2. #2
    Join Date
    Feb 2006
    Posts
    2,927
    Code:
    function newStyle(str){
    	var pa= document.getElementsByTagName('head')[0] ;
    	var el= document.createElement('style');
    	el.type= 'text/css';
    	el.media= 'screen';
    	if(el.styleSheet) el.styleSheet.cssText= str;// IE method
    	else el.appendChild(document.createTextNode(str));// others
    	pa.appendChild(el);
    	return el;
    }
    You can pass this method any amount of text-
    so long as it is allowed in a stylesheet.
    var str='#myStyle{height:300px;width:300px;display:block}'+
    'h1{color:black}h3{color:green}p{line-height:1.2;text-indent:1em}';

    newStyle(str)


    //
    Last edited by mrhoo; 12-05-2006 at 11:31 PM.

  3. #3
    Join Date
    Dec 2006
    Posts
    16
    Thanks for the help! My code still isn't completely working, but it may be because of my CSS. I want to cover the webpage with a semi-transparent block to darken everything. Here's the CSS:

    Code:
    background-color:#000000;
    filter:alpha(opacity=80);
    opacity: 0.8;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:document.body.parentNode.scrollHeight + 'px';
    display:block;
    I think the height property may be wrong...it's supposed to get the height of the webpage and append px onto it.

  4. #4
    Join Date
    Dec 2006
    Posts
    16
    I've added the CSS I want with the help of someone else, but I think there's still something wrong with my code...

    Code:
    function DarkenPage()
    {
        var str= "#myStyle{position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; filter:alpha(opacity=60); opacity: 0.6;}"
        var pa= document.getElementsByTagName('head')[0] ;
        var el= document.createElement('style');
        el.type= 'text/css';
        el.media= 'screen';
        if(el.styleSheet) el.styleSheet.cssText= str;// IE method
        else el.appendChild(document.createTextNode(str));// others
        pa.appendChild(el);
    }
    I'd appreciate any help at all...

  5. #5
    Join Date
    Apr 2006
    Posts
    120
    Did you specify the myStyle id on the body tag? <body id="myStyle">
    Last edited by LeeU; 12-07-2006 at 04:39 PM. Reason: spelling

  6. #6
    Join Date
    Dec 2006
    Posts
    16
    I think the appendChild method already does that. It's actually attaching it to the head tag, but I don't think that makes a difference.

  7. #7
    Join Date
    Apr 2006
    Posts
    120
    The appendChild is adding the dynamically created css to the page specifically within the head tag. But if the html never uses the reference "myStyle" then that style is never used so nothing will happen. I might not be understanding your problem but the following works.

    HTML Code:
    <html>
    <head>
    	<title>Untitled</title>
    	<script>
    		function DarkenPage() {
    		    var str= "#myStyle{position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; filter:alpha(opacity=60); opacity: 0.6;}"
    		    var pa= document.getElementsByTagName('head')[0] ;
    		    var el= document.createElement('style');
    		    el.type= 'text/css';
    		    el.media= 'screen';
    			if(el.styleSheet) el.styleSheet.cssText= str;// IE method
    		    else el.appendChild(document.createTextNode(str));// others
    		    pa.appendChild(el);
    		}
    	</script>
    </head>
    
    <body id="myStyle" onload="DarkenPage()">
    <span style="color:green">Some Text Here</span>
    </body>
    </html>

  8. #8
    Join Date
    Dec 2006
    Posts
    16
    I tried that code in Safari but I'm not getting any transparency on top of text, just a completely black background behind the text. Maybe it's just a difference in browsers...

    PS. I forgot to thank you for your help - this is definitely progress :-) I wonder if there's a way to dynamically set the body tag to use the "myStyle" id.
    Last edited by oskar; 12-08-2006 at 01:52 PM.

  9. #9
    Join Date
    Apr 2006
    Posts
    120
    Yes you can do that. Add

    var bt= document.getElementsByTagName('body')[0] ;
    bt.id = "myStyle";

    at the end of DarkenPage() function.

    I'm using IE and the background is a dark grayish color. Check to see if Safari recognizes filter: in CSS.

  10. #10
    Join Date
    Dec 2006
    Posts
    16
    hmmm, yes IE makes it grey. but even so, I want to overlap the content with a semi-opaque darkness, not underneath. so i not only need to get the filter working...i also need to move it on top somehow.

  11. #11
    Join Date
    Dec 2006
    Posts
    16
    Yes Safari can handle filters, so I'm not sure what the problem is. In firefox it's a solid black as well.

  12. #12
    Join Date
    Feb 2006
    Posts
    2,927
    setting the body element absolute occasionally does weird things- can you try it
    set relative? Or put the content in an absolutely positioned Div called myStyle-

    if you use the body just use it in your css string:
    var str= "body{position:relative;

  13. #13
    Join Date
    Dec 2006
    Posts
    16
    I found out the problem. For some reason, putting it in the body tag doesn't work, but putting it in a div tag does:

    HTML Code:
    <html>
    <head>
    	<title>Untitled</title>
    	<script>
    		function DarkenPage() {
    		    var str= "#myStyle{position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; filter:alpha(opacity=60); opacity: 0.6;}"
    		    var pa= document.getElementsByTagName('head')[0] ;
    		    var el= document.createElement('style');
    		    el.type= 'text/css';
    		    el.media= 'screen';
    			if(el.styleSheet) el.styleSheet.cssText= str;// IE method
    		    else el.appendChild(document.createTextNode(str));// others
    		    pa.appendChild(el);
    		    var bt= document.getElementsByTagName('div')[0] ;
    		    bt.id = "myStyle";
    		}
    	</script>
    </head>
    
    <body onload="DarkenPage()">
    <div>
    <span style="color:green">Some Text Here</span>
    </div>
    </body>
    </html>
    Is there a reason for this?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles