Tolwin: Höhe und Breite eine Images dynamisch anpassen

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 &Uuml;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

  1. 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

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
    1. 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

      1. 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

        --
        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
        1. so, jetzt klappt´s
          hatte nur vergessen das JS per onload aufzurufen %-)
          Aber nochmals vielen Dank für die Hilfe!
          Grüße
          Tolwin

  2. 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 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.

    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.


    Kai

    --
    What is the difference between Scientology and Microsoft? One is an
    evil cult bent on world domination and the other was begun by L. Ron
    Hubbard.
    ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|