Thomas Meinike: Zugriff auf Elemente mit bestimmter CSS-Klasse?

Beitrag lesen

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