how to change properties of a css class

Dev Shed Forums Sponsor:

May 14th, 2003, 10:51 PM

clam61

Senior Member

Join Date: May 2003

Posts: 151

Time spent in forums: 3 m 21 sec
Reputation Power: 0

how to change properties of a css class

i know how to write a script to change the class that an element belongs to. for example if you have a div tag that has a class of "class1" and want to change it to "class2" i know how to do that.

two questions

1. is there a way to change the properties of a css class (color, background etc) through javascript? i am not talking about changing an element's style or the class it belongs to, but changing the entire css class itself.

2. if (1) is not possible, i think i have a way. but i need to know, is there some sort of array, that i can reference by a number, that keeps track of all elements or all div elements? document.all[] seems like it would but i never see an example of someone using document.all[n] for n=0,1,2,3...

thanks

May 15th, 2003, 02:39 AM

clam61

Senior Member

Join Date: May 2003

Posts: 151

Time spent in forums: 3 m 21 sec
Reputation Power: 0

Thank you, first of all, for your help!

Wow, I'm gonna have try that out tommorrow. Right now I am pooped with trying to get my scripts to work on ns7.

Speaking of which, this is an unrelated topic, but if you know this it would help me out so much. What is the netscape equivalent of IE's "event.offsetX" and "event.offsetY"? I am trying to capture the coordinates of the mouse on the "onmousemove" event in relation to an element.

May 15th, 2003, 08:07 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 17 h 34 m 25 sec
Reputation Power: 9

Here's another way:

Supposing you have one (and only one) stylesheet linked like this:

Code:

<link rel="stylesheet" type="text/css" href="mystylesheet.css">

And this stylesheet contains:

Code:

.myclass {
	font-family: arial;
	background-color: red;
}

Add this JavaScript function to the <head> section of your document:

Code:

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[0][CSSRules].length; i++) {
		if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
			document.styleSheets[0][CSSRules][i].style[element] = value
		}
	}	
}

And here's some HTML to test it.
It's supposed to change the background color of 'myclass' from red (as stated in the stylesheet) to yellow.
It works on Mozilla and IE5.5. It does NOT work in Opera7 (does not support rules?).
Please notice that you need to use the JavaScript syntax of CSS elements (backgroundColor instead of background-color).

Code:

<p class="myclass">paragraph with style myclass</p>
<div onclick="changecss('.myclass','backgroundColor','yellow')">show css</div>

If you have more than one stylesheet, you need to change the code. If you use inline styling (a style tag inside your document), you probably need to do it differently.

Hope this helps,
Jeroen
(I like these kind of questions)

May 16th, 2003, 04:20 AM

clam61

Senior Member

Join Date: May 2003

Posts: 151

Time spent in forums: 3 m 21 sec
Reputation Power: 0

AWESOME

THIS IS GREAT!
man, javascript is such a blast to learn. i just wish there was some way i could get a reference for all the different functions etc. i never heard of rules until now.

could any of you guys recommend a good reference for javascript?
i dont really need one of those beginner manuals, i most often find i need help because i am limited by my knowledge of properties, functions etc.

i

May 16th, 2003, 01:45 PM

clam61

Senior Member

Join Date: May 2003

Posts: 151

Time spent in forums: 3 m 21 sec
Reputation Power: 0

Hi Jerom

Jerom,

Thanks for taking the time to help me out with that one. You really helped me out a lot!

Since you like these challenges how about another one? hehe.
I finally got this mouse capture script to work in both ns and ie, but there is one hitch--how do i turn the mouse capture off?

basically i have some code that im sure most people have seen:

Code:

layobj.onmousemove = moved;

where "moved" is a function that handles the onmousemove event.
so is there a way i can turn off "moved" or to turn off the onmousemove event?

thanks in advnance
chris

May 16th, 2003, 02:00 PM

clam61

Senior Member

Join Date: May 2003

Posts: 151

Time spent in forums: 3 m 21 sec
Reputation Power: 0

well i accomplished that with some global variables and if else's, but id still like to know if there is a better way to do it. i try to avoid globals when i can.

chris

May 16th, 2003, 08:46 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 17 h 34 m 25 sec
Reputation Power: 9

Seems to work in Mozilla, Opera7, and IE5.5:

Code:

function moveOff(theid) {
	var element = document.getElementById(theid)
	if (navigator.userAgent.toLowerCase().indexOf("opera") != -1)
		element.onmousemove = undefined
	else
		element.onmousemove = ''
}

Hope this helps,
Jeroen

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: