modify div class through js

[michaelmuller]

Hey all,

I'm trying to add some functionality to a web-based stylesheet editor. I'd like the style that the editor is working on to highlight the page area it will effect. This is what I have, but it only works on style IDs and not style CLASSes. How can I effect styles by class?

Thanks for any help in advance,

Michael


--------------------------
Snippet of the style sheet:
--------------------------
div.box_members { }
div.box_members div.content { color:#000000; background-color:#ace; }


--------------------------
The code:
--------------------------
onmouseover="javascript:hlLayer('div.box_members','3px dotted red;');"


--------------------------
The function:
--------------------------
function hlLayer(myStyle,what) {
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(myStyle).style;
style2.border = style2.border? "":what;
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[myStyle].style;
style2.border = style2.border? "":what;
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[myStyle].style;
style2.border = style2.border? "":what;
}
}

 

[BabyJeffy]

Here is how I did this (there are so many ways... including using some of the free javascript libraries out there (dojo, prototype, etc). First, use a function like this:

<script type="text/javascript">
/* return a collection of elements that match a supplied class and element type */
function getElementsByClassName(className, elementType) {
	var resultCollection = [];
	if (className && elementType && className!='' && elementType!='') {
		var elementCollection = document.getElementsByTagName(elementType);
		for (var loop=0, max=elementCollection.length; loop<max; loop++) {
			if (elementCollection[loop].className.indexOf(className)>-1)
				resultCollection[resultCollection.length] = elementCollection[loop];
		}
	}
	return resultCollection;
}
</script>

Then integrate it to work using your own function like this:

function hlLayer(myStyle,what) {
	var myElementType = myStyle.split('.')[0];
	var myClassName = myStyle.split('.')[1];
	var elementCollection = getElementsByClassName(myClassName, myElementType);
	for (var loop=0, max=elementCollection.length; loop<max; loop++) {
		elementCollection[loop].style.border = what;
	}
}

It works for me... but I wouldn't bother trying it for the older browsers

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[michaelmuller]

Beautiful. It works. However, hmmm... anyway to make the style attribute change temporary? I have it set onmouseover. When I mouse-out, it should revert back. I guess I can just remove the border, but it may not be what was originally there.

Any ideas?

Also, I'm thinking that I want to change the background-image instead, and I get an error because of the hyphen.

Obviously I'm not a very good javascript coder. That's something I should know how to deal with.

 

[michaelmuller]

Actually, this seems to only work when the style is something like ...

div.box_members

... and not ...

div.box_members div.content

Ah well. I guess what I'd really like to do is be able to pass a full style name (such as 'div.box_members div.content a:hover' for instance) and the attribute:value;

Thanks,

Michael

 

[BillyRayPreachersSon]

Here's one I wrote because I found that "getElementsByTagName('*')" doesn't work in IE 5.0 or IE 5.5, so you need to code around that:

function getElementsByClassName(classToFind, baseElement) {
	if (arguments.length == 1) baseElement = document;

	var tempElements = baseElement.getElementsByTagName('*');

	// getElementsByTagName('*') doesn't work in IE 5.0 or IE 5.5 (Win)... so use this as a backup
	if (!tempElements.length) if (document.body) if (document.body.all) tempElements = document.body.all;

	var matchingElements = [];
	for (var loop=0; loop<tempElements.length; loop++) {
		if ((' ' + tempElements[loop].className + ' ').indexOf(' ' + classToFind + ' ') != -1) {
			matchingElements[matchingElements.length] = tempElements[loop];
		}
	}
	return(matchingElements);
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tsdragon]

FYI: you ONLY need the javascript: part (it's actually a "pseudo-protocol", like mailto when you put javascript code into an anchor tag's href attribute. Event handlers are expecting javascript code, so it's not only redundant, but technically incorrect.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.