nicht angemeldet
CSS per Javascript ändern
Hallo,
falls das Browserfenster eine bestimmte Höhe überschreitet, möchte ich die für einen <div id="img_head"> padding-top=100px; setzen.
Wie man die Infos über das Browserfenster bekommt, habe ich hier gefunden:
http://de.selfhtml.org/javascript/objekte/style.htm#allgemeines
Nun habe ich folgendes versucht:
if (Hoehe >= 500) {
var obj= document.getElementById(img_head);
img_head.style.paddingTop = "100px;
}
oder auch
if (Hoehe >= 500) {
document.getElementById(img_head).style.paddingTop = "100px;
}
Ich kann kein JavaScript und habe nur versucht, Tipps aus Foren oder Tutorials anzupassen, es klappt aber nicht.
Eingebaut habe ich es gleich nach <body>:
<script type="text/javascript">
/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) {
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}
document.write("Weite: " + Weite + " Höhe: " + Hoehe);
if (Hoehe >= 500) {
var obj= document.getElementById(img_head);
img_head.style.paddingTop = "100px;
}
</script>
Wenn ich die 3 von mir selbst geschriebenen Zeilen lösche, dann funktioniert document.write("Weite: " + Weite + " Höhe: " + Hoehe); (d.h. Breite und Höhe werden am Bildschirm angezeigt), mit meinen 3 Zeilen klappt selbst das nicht mehr ...
Liebe Grüße, Stefan
-
Sorry, muss jeweils "100px"; heißen.
Es fehlte also ein ".Der Fehler ist dadurch aber nicht weg ...
Stefan
-
Hi,
Der Fehler ist dadurch aber nicht weg ...
Schoen, dann koennen wir jetzt vielleicht eine vernuenftige Fehler*beschreibung* bekommen?
Denn bisher hast du dich auf das sinnfrei "funzt nicht" beschraenkt.Also lies bitte die Tipps fuer Fragende.
Und dann schau in die Fehlerkonsole deines Testbrowsers (idealerweise Firefox), mache Kontrollausgaben, etc.MfG ChrisB
-
Ok, der Fehler besteht darin, dass nichts passiert, wenn die Höhe größer als 500 ist. Das padding-top wird nicht auf 100px gesetzt, wie es sollte.
Firefox Fehlerkonsole, interessant, kannt ich nicht. Die machte einen grün gestrichelten Pfeil zu dem Anführungszeichen vor 100px. "Unterminated string literal" steht da außerdem noch.
Kontrollausgabe: Ja, die Höhe wird richtig ausgegeben.
Stefan
-
Halt, in der Fehlerkonsole steht das neueste ja zuunterst.
Dann lautet die Fehlermeldung:img_head is not defined
Das passiert auch, wenn ich
if (Hoehe >= 500) {
var obj= document.getElementById(img_head);
img_head.style.paddingTop = "100px";
}erst am Ende, also vor </body> einbaue.
Stefan
-
Hi,
Halt, in der Fehlerkonsole steht das neueste ja zuunterst.
Dann lautet die Fehlermeldung:img_head is not defined
Natuerlich, Variablen definieren sich ja nicht von selber.
Solltest du stattdessen das Textliteral mit diesem Wert als *Inhalt* gemeint haben - dann notiere es auch als solches.
MfG ChrisB
-
-
Hi,
Firefox Fehlerkonsole, interessant, kannt ich nicht. Die machte einen grün gestrichelten Pfeil zu dem Anführungszeichen vor 100px. "Unterminated string literal" steht da außerdem noch.
Dann hast du den Fehler, von dem du im zweiten Posting berichtet hast, vermutlich noch nicht (ueberall) korrigiert, oder der Cache spielt dir einen Streich.
Kontrollausgabe: Ja, die Höhe wird richtig ausgegeben.
Und der Rest?
Klappt bspw. der Zugriff auf das gewuenschte Element?Dass du eine Variable namens img_head irgendwo definiert haettest, sehe ich bspw. nicht.
Und selbst wenn du haettest,
var obj= document.getElementById(img_head);
also funktionieren wuerde - dann waere das
img_head.style.paddingTop = "100px;
immer noch unsinnig - du hast dir doch vorher gerade die Referenz auf das HTML-Element in obj besorgt, also willst du wohl auch ueber dieses darauf zugreifen.
MfG ChrisB
-
Dass du eine Variable namens img_head irgendwo definiert haettest, sehe ich bspw. nicht.
Und selbst wenn du haettest,
var obj= document.getElementById(img_head);
also funktionieren wuerde - dann waere das
img_head.style.paddingTop = "100px;
immer noch unsinnig - du hast dir doch vorher gerade die Referenz auf das HTML-Element in obj besorgt, also willst du wohl auch ueber dieses darauf zugreifen.Sorry, meine JavaScript Kenntnisse sind so gering, dass ich deine Antworten nicht richtig verstehen kann. Ich muss mich da erst mehr mit beschäftigen.
img_head ist nur die CSS-id des <div id="img_head">, keine Variable.
Trotzdem Danke, Stefan
-
Hi,
img_head ist nur die CSS-id des <div id="img_head">, keine Variable.
Warum benutzt du es dann im *Javascript*-Teil wie eine Variable?
var obj= document.getElementById(img_head);
Du rufst hier eine Methode auf, und uebergibst ihr eine Variable als Parameter.
Wie schon gesagt, wenn du stattdessen das Textliteral meinst, welches den Wert der ID enthaelt - dann notiere es auch entsprechend.
MfG ChrisB
-
Danke für deine Geduld! :)
Heute hat es mit deinen Tipps geklappt ...
if (Hoehe >= 500) {
var id = "img_head";
document.getElementById(id).style.paddingTop = "100px";
}Stefan
-
Hallo Stefan!
if (Hoehe >= 500) {
var id = "img_head";
document.getElementById(id).style.paddingTop = "100px";
}Ich weiß nicht, wie die JS-Gelehrten das sehen, aber mMn ist es besser, sich es so anzugewöhnen:
document.getElementById(id).style.paddingTop = 100+"px";Der Grund ist, dass Du den Zahlenwert bei Bedarf in einer Variable (z.B. hier für padding-top: padTop) speichern kannst, bei einer weiteren Manipulation der Eigenschaft, schreibst Du dann hinter dem Istgleichzeichen direkt: padTop+"px"
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
-
-
-
-
-
-
-