Höhe und Breite eine Images dynamisch anpassen
Tolwin
- javascript
Hallo Forum,
ich versuche einem Image die Höhe eine DIV Tag zuzuweisen.
Die Höhe des DIV`s ermittel ich mit JS wie folgt:
function GiveValues(){
var breite = document.getElementById("contentDiv").offsetWidth;
var hoehe = document.getElementById("contentDiv").offsetHeight;
Die ermittelten Werte möchte ich nun zwecks Größendefinition einem
Image zuweisen ... das habe ich so versucht
document.getElementById('rechts').Height = hoehe + 18 +"px";
Der Höhe soll hierbei der Wert 18 addiert und die Größenangabe px angehängt werden.
Hier der DIV Tag und das Image
<div id="contentDiv" style="width:625px; height:350px; background-color:#FFFFFF; border-left: 2px solid #FF9900; border-top: 2px solid #FF9900;z-index:2;"><p>Ihre Vorteile im Überblick </p></div>
<img id="rechts" src="/all/images/schatten_rechts.png" height="340px" width="8px" style="margin:-10px 0px 0px 0px;z-index:1;" />
Das funktioniert so leider nicht ... könnte mir jemand sagen warum?
Schon mal vorab vielen Dank und Gruß
Tolwin
Yerf!
document.getElementById('rechts').Height = hoehe + 18 +"px";
Das funktioniert so leider nicht ... könnte mir jemand sagen warum?
Die CSS-Angaben werden bei JS über das Style-Unterobjekt gesetzt:
document.getElementById('rechts').style.height = hoehe + 18 +"px";
Gruß,
Harlequin
Danke für die Tipps.
Leider funktioniert es so nicht.
Habe jetzt im style="height:0px;" definiert .... er übernimmt aber
nicht die style.height aus dem JS ...
var breite = document.getElementById("contentDiv").offsetWidth;
var hoehe = document.getElementById("contentDiv").offsetHeight;
document.getElementById('rechts').style.height = hoehe + 18 +"px";
<img id="rechts" src="/all/images/schatten_rechts.png" width="8px" style="margin:-10px 0px 0px 0px;z-index:1;height:0px" />
Was mache ich falsch? Darf ich kein height im IMG Tag definiert haben? Ein Test brachte auch keinen Erfolg
Grüße
Tolwin
Yerf!
Was mache ich falsch? Darf ich kein height im IMG Tag definiert haben? Ein Test brachte auch keinen Erfolg
Hm, schwer zu sagen, der Code sieht soweit eigentlich gut aus (Die offsetHeight ist tatsächlich ohne Einheit, weshalb hier kein parseInt benötigt wird). Schau mal, ob es irgendwelche JavaScript-Fehlermeldungen gibt (am besten in der Fehlerkonsole des Firefox). Wann und wie wird der Code eigentlich aufgerufen? Evtl. findet er zu diesem Zeitpunkt das Bild noch nicht.
Gruß,
Harlequin
so, jetzt klappt´s
hatte nur vergessen das JS per onload aufzurufen %-)
Aber nochmals vielen Dank für die Hilfe!
Grüße
Tolwin
Grütze .. äh ... Grüße!
var breite = document.getElementById("contentDiv").offsetWidth;
var hoehe = document.getElementById("contentDiv").offsetHeight;Die ermittelten Werte möchte ich nun zwecks Größendefinition einem
Image zuweisen ... das habe ich so versuchtdocument.getElementById('rechts').Height = hoehe + 18 +"px";
Der Höhe soll hierbei der Wert 18 addiert und die Größenangabe px angehängt werden.
was sagt alert(breite)? Wahrscheinlich ein Zahlenwert mit 'px' dahinter, also ein string. Damit kann man nicht rechen. Mit parseInt umwandeln.
Zwei (oder mehr) Mal die Referenz auf das gleiche Objekt zu suchen ist auch nicht notwendig.
Und du benutzt bei der Zuweisung .Height statt .height, wird wohl auch nicht funktionieren.
var meinDiv = document.getElementById("contentDiv");
var breite = parseInt(meinDiv.offsetWidth,10);
var hoehe = parseInt(meinDiv.offsetHeight,10);
Damit kannst du rechen.
Cü
Kai