Javascript "Classes"

Xibe · 02-02-2009, 08:09 PM

I'm a noob when it comes to javascript. Excuse my ignorance!

Is there any way to replicate the CSS version of "class" for javascript?

Say I have like seventeen elements that I want to all use the same javascript:

Code:

onmouseover="this.style.backgroundColor='#e6e6e6'; this.style.cursor='pointer';" onmouseout="this.style.backgroundColor='#FFFFFF';" onclick="toggle('type'); toggle('mail')

It would be a pain to copy all of those into each div/table/td etc. Isn't there a way to replicate this kind of functionality: class="toggle" to make it easier?

I searched some ways on Google and found some good ways of doing stuff through functions... but not really what I was looking for.

rnd me · 02-02-2009, 11:12 PM

don't copy repetive stuff into html, it usually just adds messiness and bloat.

you can use a class or name to group the elements, or just make a list of their id's, or collect each tag under a common parent.

once you have a group of tags selected, upgrade them in a loop when the page loads.

you the onload event as a chance to cycle through the tags, adding style, classes, and events to each tag.

the html in your document doesn't need to change to expand the functionality; you only have to modify the group of tags you modify onload.

Xibe · 02-02-2009, 11:58 PM

I'm sorry... I don't understand what you're saying I should do.

Quote:

upgrade them in a loop when the page loads

How do I do that? What does it mean to upgrade them in a loop?

Quote:

you the onload event as a chance to cycle through the tags, adding style, classes, and events to each tag.

What do you mean by this?

gun5 · 02-03-2009, 06:17 AM

Hi,

I'm a newbie too. Is this help?

Code:

<html>
<head>
<script language="javascript">
function fnMover(){
this.style.background="#06f";
}
function fnMout(){
this.style.background="#fff";
}
function cls(sObj,sCls,sE1,sE2){
var o = document.getElementsByTagName(sObj);
	for(j=0;j<o.length;j++){
		if(o[j].className==sCls){
			// netscape
			o[j].addEventListener(sE1,fnMover,false);
			o[j].addEventListener(sE2,fnMout,false);
		}
	}
}

window.onload=function(){
cls("p","prg","mouseover","mouseout");
}
</script>
</head>
<body>
<p class="prg">par 1</p>
<p class="prg">par 2</p>
</body>
</html>