nicht angemeldet
Zugriff auf Elemente mit bestimmter CSS-Klasse?
Hi!
Ich möchte per Javascript auf alle Elemente mit einer bestimmten CSS-Klasse (<...class="klassenname"...>) im Document zugreifen.
Zwar kann ich bekanntich mit document.getElementsByName zugreifen, doch müsste ich all den Elementen eine Klasse und(!) einen Namen zuordnen, was ich unelegant und überflüssig finde.
In meinem Fall interessieren mich nur die Elemente, denen diese eine Klasse angehört.
Ich bräuchte also sowas wie:
getElementsByClass("klassenname").[x]...
Hat jemand eine Idee?
Grüße, Bürgle
http://www.benotung.de
--
IE - No risk, no fun.
IE - No risk, no fun.
-
Hallo,
Ich möchte per Javascript auf alle Elemente mit einer bestimmten CSS-Klasse (<...class="klassenname"...>) im Document zugreifen.
Zwar kann ich bekanntich mit document.getElementsByName zugreifen, doch müsste ich all den Elementen eine Klasse und(!) einen Namen zuordnen, was ich unelegant und überflüssig finde.Das ist auch nur dann sinnvoll, wenn das Element ueberhaupt ueber das Attribut name verfuegt, z. B. input, select usw.
Mozilla scheint aber ueberall name-Attribute zu tolerieren.In meinem Fall interessieren mich nur die Elemente, denen diese eine Klasse angehört.
Ich bräuchte also sowas wie:getElementsByClass("klassenname").[x]...
Hat jemand eine Idee?
Greife ueber object.className zu, z. B. so:
<!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=document.getElementsByTagName("p");
for(i=0;i<obj.length;i++)
{
if(obj[i].className=="abc")obj[i].className="xyz";
}
}
//-->
</script>
</head>
<body>
<p class="abc">Test mit Klasse</p>
<p class="abc">Test mit Klasse</p>
<p>Test mit ohne Klasse ;-)</p>
<p class="abc">Test</p>
<p>Test mit ohne Klasse ;-)</p>
<p>Test mit ohne Klasse ;-)</p>
<p class="abc">Test</p>
<p class="abc">Test</p>
<form action="">
<input type="button" value="Klassen tauschen ..." onclick="KlassenTauschen()">
</form>
</body>
</html>MfG, Thomas
-
Hi!
Vielen Dank für den Tipp!
Leider hab ich das Problem, dass ich u.u. die Klasse auch mehrmals verändern möchte, in dem Fall wird die if-Bedingung dann nicht mehr erfüllt :(.
Desweiteren sollte das ganze nicht auf eine bestimmte Elementgruppe bezogen sein (in Deinem Beispiel "p")
Naja, ich muss mir wohl was anderes überlegen oder mal dem W3C
die Funktion getElementsByClass... nahelegen! :) :)Danke nochmal.
Bürgle
http://www.benotung.de--
IE - No risk, no fun.-
Hallo,
Leider hab ich das Problem, dass ich u.u. die Klasse auch mehrmals verändern möchte, in dem Fall wird die if-Bedingung dann nicht mehr erfüllt :(.
Desweiteren sollte das ganze nicht auf eine bestimmte Elementgruppe bezogen sein (in Deinem Beispiel "p")
Naja, ich muss mir wohl was anderes überlegen oder mal dem W3C
die Funktion getElementsByClass... nahelegen! :) :)Im IE kann man alle Elemente bzw. deren Klassen ueber document.all[i].className mit i=0 bis document.all.length-1 ansprechen.
Ein entsprechendes Konstrukt erhaelt man unter Mozilla mittels myall=document.getElementsByTagName("*") und kann nun myall[i].className mit i=0 bis myall.length-1
verwenden.MfG, Thomas
-
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
-
Hi!
Ich habe eine solche Funktion mal angedacht:
Bin begeistert! :)
Vielen Dank!
Du hast mir sehr weitergeholfen!
Ich werde die Funkton zwar noch etwas abändern müssen, aber das dürfte kein Problem darstellen.Danke nochmal für Deine Mühe!
Grüße, Bürgle
http://www.benotung.de--
IE - No risk, no fun.
-
-
-