Hallo,
Naja, ich muss mir wohl was anderes überlegen oder mal dem W3C
die Funktion getElementsByClass... nahelegen! :) :)
Ich habe eine solche Funktion mal angedacht:
function getElementsByClassName(class_name)
{
var all_obj,ret_obj=new Array(),j=0;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++)
{
if(all_obj[i].className==class_name)
{
ret_obj[j]=all_obj[i];
j++
}
}
return ret_obj;
}
Das funktioniert auch ganz prima mit IE 5.5/6, Mozilla und Opera 7.
Zum Testen das bereits genannte Beispiel in erweiterter Form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 12/02</title>
<style type="text/css">
<!--
.abc
{
color: #00C;
background-color: #FFC;
}
.xyz
{
color: #F00;
background-color: #EEE;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function KlassenTauschen()
{
var obj=getElementsByClassName("abc");
for(i=0;i<obj.length;i++)
{
obj[i].className="xyz";
}
}
function getElementsByClassName(class_name)
{
var all_obj,ret_obj=new Array(),j=0;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++)
{
if(all_obj[i].className==class_name)
{
ret_obj[j]=all_obj[i];
j++
}
}
return ret_obj;
}
//-->
</script>
</head>
<body onload="alert('Die Klasse abc wurde '+getElementsByClassName('abc').length+' Elementen zugewiesen.')">
<p class="abc">Test mit Klasse</p>
<p class="abc">Test mit Klasse</p>
<p>Test mit ohne Klasse ;-)</p>
<p class="abc">Test mit Klasse</p>
<p>Test mit ohne Klasse ;-)</p>
<p>Test mit ohne Klasse ;-)</p>
<p class="abc">Test mit Klasse</p>
<p class="abc">Test mit Klasse</p>
<form action="">
<input type="button" value="Klassen tauschen ..." onclick="KlassenTauschen()">
</form>
</body>
</html>
MfG, Thomas