SitePoint.com

Jeff Lange · Sep 15, 2004, 01:10

Is it possible to add a CSS class using javascript (other than using the document.write feature obviously).

Thanks

AlexW · Sep 15, 2004, 01:34

What do you mean 'add'?

Yes, you could target an element within a page using the DOM and apply CSS to it. If it's a lot of CSS it might be easier to have the class already on the element, and put the CSS in a separate style sheet you can turn on or off when certain conditions are met.

sinapra · Sep 15, 2004, 01:43

you dont have to mix them, need a style, have a css file with the feature and include it in your script and call the class. Javascript can be included in the same script but to perform other actions, it may not give you the style that you can get from a css file. Think both of them as seperate entities which you can use in your script.

Regards

vgarcia · Sep 15, 2004, 06:20

Quote:

Originally Posted by Jeff Lange

Is it possible to add a CSS class using javascript (other than using the document.write feature obviously).

Thanks

Take a look at the document.styleSheets collection; specifically, the part about adding rules.

Off Topic:

Where you been Jeff? It's been a while!

Jeff Lange · Sep 15, 2004, 13:36

I don't want the class to exist if certain things aren't available in Javascript. I know how to apply a class to an element, and apply styles to an element. What I'm looking for is setting up a class in via javascript if certain things are available. I also want to have the class setup before the page starts loading. The reason is I want the class styles applied to the elements on the page as the page loads and not go through the elements after the page loads.

(Specifically I want external images hidden until my script verifies how wide they are, and if they are too wide it shrinks them down, but I don't want it hiding the images if the browser isn't capable of making them visible again.

)

I remember the styleSheets collection now, I'll look into that, thanks man.

Off Topic:

I've been away from Web Design itself and computers for quite a while now, mainly going to school and working on other stuff (cars, etc). In fact this script is for a Supra site I am a moderator at, heh. After having been away for quite a while I find it hard to start working on this stuff again, I've tried a few times, and haven't been successful, I need someone to pay me or something, haha. Now that the summer is over though, I hope to be around a bit more.

adios · Sep 15, 2004, 13:44

Just a note: the .stylesheets[] collection is not supported in any version of Opera.

This sounds like something that should be done at the server...

http://www.quirksmode.org/dom/changess.html

Jeff Lange · Sep 15, 2004, 14:04

Yeah I gave up on it after seeing browser support for it, lol.

How can I detect if a browser has javascript enabled at the server without a detection page first?

vgarcia · Sep 15, 2004, 14:07

Quote:

Originally Posted by Jeff Lange

Off Topic:

I've been away from Web Design itself and computers for quite a while now, mainly going to school and working on other stuff (cars, etc). In fact this script is for a Supra site I am a moderator at, heh. After having been away for quite a while I find it hard to start working on this stuff again, I've tried a few times, and haven't been successful, I need someone to pay me or something, haha. Now that the summer is over though, I hope to be around a bit more.

Off Topic:

Cool. We all need a break from time to time

Saturn · Sep 15, 2004, 14:15

This works in IE6, Mozilla and Opera 7.5:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>cbAddRule test</title>
<style type="text/css">
</style>
<script type="text/javascript">
function cbAddRule(aSelector, aRule) {
	if (document.styleSheets && document.styleSheets[0]) {
		if (document.styleSheets[0].insertRule)
			document.styleSheets[0].insertRule(aSelector+" "+aRule,
			document.styleSheets[0].length);
		else if (document.styleSheets[0].addRule)
			document.styleSheets[0].addRule(aSelector, aRule);
	}
	else {
		var ss = document.createElement("style");
		var tn = document.createTextNode(aSelector+" "+aRule);
		ss.appendChild(tn);
		document.getElementsByTagName("head")[0].appendChild(ss);
	}
}

window.onload = function() {
		cbAddRule(".someClass", "{ color: red }");
}
</script>
</head>
<body>
<p class="someClass">
	Is this text red or not?
</p>
</body>

Jeff Lange · Sep 15, 2004, 14:22

Yeah I had thought about doing that, but was too lazy to implement it,

. Thanks man, I think I'll use it.

Sep 15, 2004, 01:10	#1
Jeff Lange "Of" != "Have" Join Date: Jan 2003 Location: Calgary, Canada Posts: 2,060	Add a CSS class using Javascript? Is it possible to add a CSS class using javascript (other than using the document.write feature obviously). Thanks

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 15, 2004, 01:34	#2
AlexW Team SitePoint Join Date: Apr 2000 Location: Melbourne Posts: 1,007	What do you mean 'add'? Yes, you could target an element within a page using the DOM and apply CSS to it. If it's a lot of CSS it might be easier to have the class already on the element, and put the CSS in a separate style sheet you can turn on or off when certain conditions are met.

Sep 15, 2004, 01:43	#3
sinapra SitePoint Addict Join Date: Sep 2004 Location: secunderabad Posts: 273	you dont have to mix them, need a style, have a css file with the feature and include it in your script and call the class. Javascript can be included in the same script but to perform other actions, it may not give you the style that you can get from a css file. Think both of them as seperate entities which you can use in your script. Regards

Sep 15, 2004, 13:36	#5
Jeff Lange "Of" != "Have" Join Date: Jan 2003 Location: Calgary, Canada Posts: 2,060	I don't want the class to exist if certain things aren't available in Javascript. I know how to apply a class to an element, and apply styles to an element. What I'm looking for is setting up a class in via javascript if certain things are available. I also want to have the class setup before the page starts loading. The reason is I want the class styles applied to the elements on the page as the page loads and not go through the elements after the page loads. (Specifically I want external images hidden until my script verifies how wide they are, and if they are too wide it shrinks them down, but I don't want it hiding the images if the browser isn't capable of making them visible again. ) I remember the styleSheets collection now, I'll look into that, thanks man. Off Topic: I've been away from Web Design itself and computers for quite a while now, mainly going to school and working on other stuff (cars, etc). In fact this script is for a Supra site I am a moderator at, heh. After having been away for quite a while I find it hard to start working on this stuff again, I've tried a few times, and haven't been successful, I need someone to pay me or something, haha. Now that the summer is over though, I hope to be around a bit more.

Sep 15, 2004, 13:44	#6
adios SitePoint Wizard Join Date: May 2003 Posts: 1,844	Just a note: the .stylesheets[] collection is not supported in any version of Opera. This sounds like something that should be done at the server... http://www.quirksmode.org/dom/changess.html

Sep 15, 2004, 14:04	#7
Jeff Lange "Of" != "Have" Join Date: Jan 2003 Location: Calgary, Canada Posts: 2,060	Yeah I gave up on it after seeing browser support for it, lol. How can I detect if a browser has javascript enabled at the server without a detection page first?

Sep 15, 2004, 14:22	#10
Jeff Lange "Of" != "Have" Join Date: Jan 2003 Location: Calgary, Canada Posts: 2,060	Yeah I had thought about doing that, but was too lazy to implement it, . Thanks man, I think I'll use it.