How to create CSS styles from within javascript?

**oskar** · 12-05-2006 10:10 PM

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.

**mrhoo** · 12-05-2006 10:23 PM

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)

//

**oskar** · 12-05-2006 10:49 PM

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.

**oskar** · 12-07-2006 02:42 PM

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...

**yellabuff** · 12-07-2006 03:02 PM

Did you specify the myStyle id on the body tag? <body id="myStyle">

**oskar** · 12-07-2006 03:49 PM

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.

**yellabuff** · 12-08-2006 10:54 AM

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>

**oskar** · 12-08-2006 12:49 PM

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.

**yellabuff** · 12-08-2006 01:11 PM

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.

**oskar** · 12-08-2006 03:43 PM

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.

**oskar** · 12-08-2006 04:16 PM

Yes Safari can handle filters, so I'm not sure what the problem is. In firefox it's a solid black as well.

**mrhoo** · 12-08-2006 09:41 PM

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;

**oskar** · 12-08-2006 10:14 PM

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: How to create CSS styles from within javascript?

Thread Tools

Display

How to create CSS styles from within javascript?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions