✔ Per JavaScript auf CSS-Class zugreifen

[Trash]

Moin,
ich habe eine <div class="hide">, die lediglich den Style display:none; besitzt. Nun soll diese Klasse, nach einem Klick per JavaScript auf display:block; gesetzt werden.

Ich finde im Internet eigentlich nur Anleitungen für id oder name-Objekte, nicht aber für CSS-Classes. Weiß jemand wie das geht?

HAbe es so ausprobiert, aber es passiert nichts:

<div class="hide" name="hide">

function changeHideDiv () {
	var el = document.getElementsByName("hide");
	el.style.display = "block";
}

 

[Quaese]

Hi,

zunächst muss erwähnt werden, dass DIVs kein name-Attribut kennen und somit nicht gewährleistet ist, dass ein Zugriff über die Methode getElementsByName browser-übergreifend funktioniert.

Desweiteren liefert getElementsByName ein Array zurück. Somit müsste es korrekt

el[0].style.display = "block";

heissen.

Es ist jedoch dringend anzuraten über eine ID auf das Element zuzugreifen.

Soll über eine Klasse zugegriffen werden, so bleibt anzumerken, dass einige aktuelle Browser eine Methode getElementsByClassName implementiert haben. Für die anderen gibt es hier ein Script, dass die Funktionalität nachstellt.

Ciao
Quaese

 

[Trash]

Moin,
ich habe mehrere Buchstaben in meinem Menü, und je nach onmouseover auf einem Buchstaben, soll das entsprechende div-Element angezeigt werden. Ich habe nun sämtliche IDs wie z.B "#hide_a" erstellt und mit display:none; belegt.

Per onmouseover soll aus display:none; = display:block; werden. Aber irgendwie passiert beim onmouseOver gar nichts...Wisst ihr woran es liegt?

#hide_a{
		display: none;		
	}
	
	#hide_b{
		display: none;		
	}

...

<ul .... onMouseOver=\"showHideDiv(".$buchstabe."),document.images.....onMouseOut=\"hideHideDiv(".$buchstabe."),document.images.....


$returnValue .= "<div id=\"hide_".$buchstabe."\"><ul class=

	<script type="text/javascript">
	function showHideDiv (name) {
	var el = document.getElementById("hide_"+name);
	el[0].style.display = "block";
	}
	function hideHideDiv (name) {
	var el = document.getElementById("hide_"+name);
	el[0].style.display = "none";
	}
	</script>

 

[Quaese]

Hi,

wie ich bereits geschrieben habe, liefert getElementsByName ein Array zurück. getElementById jedoch nur ein einzelnes Element, was auch logisch ist, da eine ID eindeutig sein muss. Aus diesem Grund müssen die eckigen Klammern mit dem Index in hier entfernt werden.

<script type="text/javascript">
function showHideDiv (name) {
  var el = document.getElementById("hide_"+name);
  el.style.display = "block";
}
function hideHideDiv (name) {
  var el = document.getElementById("hide_"+name);
  el.style.display = "none";
}
</script>

Ciao
Quaese

 

[Trash]

Hallo,
danke, habe ich geändert. Aber bei dem onMouseOver ändert sich immer noch nichts an den display-Eigenschaften. Noch ne Idee?

 

[Quaese]

Du musst die "Buchstabenvariable" als String übergeben. Dazu setzt du sie im onmouseover-Event in einfache Anführungszeichen.

<ul .... onMouseOver=\"showHideDiv('".$buchstabe."'),document.images.....onMouseOut=\"hideHideDiv('".$buchstabe."'),document.images.....

Sollten noch Fehler auftreten, wäre es besser, den geparsten Quelltext zu posten. Mit den PHP-Variablen ist es immer sehr schwierig zu erkennen, woran der Fehler liegen könnte.

Ciao
Quaese