onClick - Größe einer Div ändern

[Sascha.H]

Hey Leute ich habe ein kleines Problem. Ich möchte, dass man auf meiner Internetseite die Sitemap im Footer per Klick auf einen Button öffnen und wieder schließen kann. Aufklappen funktioniert wunderbar, aber schließen lässt er sich nicht mehr...

Hier mein Code:

function show_sitemap(){
				size = document.getElementById("footer").style.height;
				
				if (size = 35+"px") {
					document.getElementById("footer").style.height = 300+"px";	
					document.getElementById("sitemap-button").style.background = "url(img/arrow_down.jpg)";					
				}
				else {
					document.getElementById("footer").style.height = 35+"px";	
				}
							
			}

<li id="sitemap-button"><a href="#" onclick="show_sitemap();"></a></li>

 

[mikdoe]

if (size = 35+"px") ist falsch, bei Abfragen immer zwei oder drei = verwenden. Und prüf mal, was da zurückkommt, ich glaube, da kommt ein Integer zurück, also ohne 'px'.

 

[Sascha.H]

Habs gerade eben auch rausgefunden, ziemlich dummer Anfängerfehler es funktioniert nun, allerdings gibt es ein neues Problem... und zwar passiert beim 1. Klick nichts, erst beim 2. lässt sich die Sitemap öffnen.

 

[mikdoe]

passiert beim 1. Klick nichts, erst beim 2. lässt sich die Sitemap öffnen.

Was enthält size genau beim ersten klick?

 

[Sascha.H]

size = document.getElementById("footer").style.height;

Und das hat in der CSS 35px

 

[Sascha.H]

Wenn ich es direkt in den Footer-Tag reinschreibe mit<style="height: 35px;" funktioniert es komischerweise...

 

[mikdoe]

Füg mal die Zeile alert(size) ein und schau dir an, was geliefert wird.

 

[Sascha.H]

Es wird garnichts zurückgegeben. Obwohl es in der CSS Steht...

 

[mikdoe]

Siehst du. Deswegen benutzt man dafür auch .offsetHeight anstatt .style.height
Die kleine Übung sollte dir zeigen, wie man sich selbst helfen kann, das eigene Programm zu kontrollieren.
Eine andere Variante ist console.log(), dafür muss aber die Fehlerkonsole (F 12) offen sein.

 

[kkapsner]

CSS Definitionen, die in einem separaten <style> oder einer externen CSS-Datei gemacht wurden, werden nicht in ELEMENT.style repräsentiert. Da drin werden nur die Styles zurückgegeben, die auch wirklich nur bei diesem Element stehen - also inline-Styles und alles, was man per JS da rein schreibt.
Wenn man wissen will, was wirklich das CSS aussagt, muss man über window.getComputedStyle() (oder in älteren IEs ELEMENT.currentStyle) gehen.

PS: @mikdoe: .style.height liefert immer das zurück, was man da reingeschrieben hat - also niemals einen Integer, da height eine Einheit braucht.
PPS: 35 + "px" ist extrem unhandlich... warum nicht gleich "35px"?

 

[mikdoe]

Ja, ich hatte das mit der Rückgabe aus .offsetHeight verwechselt.