Jense: style.height+X wie muss X aussehen?

Hi,
ich steh mal wieder aufm Schlauch.

element1.style.height = element2.style.height

funktioniert. Ich schaffe es aber nicht auf der rechten Seite einen festen Wert von z.B. 100px zu addieren. Welche Kombination von " und + ist dazu notwendig?

Also

element1.style.height = element2.style.height+"100px"

funktioniert z.B. nicht.

Gruss Jense

  1. funktioniert. Ich schaffe es aber nicht auf der rechten Seite einen festen Wert von z.B. 100px zu addieren. Welche Kombination von " und + ist dazu notwendig?

    Also

    element1.style.height = element2.style.height+"100px"

    funktioniert z.B. nicht.

    element1.style.height = element2.style.height+"100px"

    Wenn wir davon ausgehen, dass element2 die Höhe 300 hat, wird das vom Parser verwandelt in:

    element1.style.height = "300px" + "100px"

    Da beides Strings sind, werden sie aneinandergehängt und es entsteht:

    300px100px

    Das ist natürlich kein gültiger CSS Wert für die Höhe.
    Du musst also aus den "300px" eine Zahl machen. Das mit mit parseInt(String).

    alert(parseInt(element2.style.height)); gibt aus: 300
    Nun wo wir nicht mehr einen String wie "300px" sondern die Zahl 300 haben, können wir 100 addieren (300 + 100) und am Ende noch "px" dranhängen (300 + 100 + "px").

    Das ganze sieht dann so aus:
    element1.style.height = (parseInt(element2.style.height) + 100) + "px";

    1. Hi und Danke,

      parseInt

      das werd ich mir merken!

      Nochmals Danke...!

  2. Tach,

    Also

    element1.style.height = element2.style.height+"100px"

    funktioniert z.B. nicht.

    denken wir uns einfach mal gemeinsam durch:

    wie du bereits weißt, mußt du einen Wert der Form "Maßzahl + Maßeinheit" an style.height übergeben; auch wenn du style.height abfragst bekommst du einen derartigen Wert, im Beispiel also "100px". Was für ein Variablentyp ist 100px für Javascript? Richtig, ein String und du fügst mit dem +-Operator einen weiteren String hinzu. Wie wirkt der +-Operator auf Strings? Richtig, er verkettet die Strings, auf der rechten Seite steht dann also "100px100px", das ist natürlich kein gültiger Wert für style.height. Du mußt also zuerst den Wert, den du bekommst zerlegen und dann nur beim Maßzahlanteil die Addition durchführen.

    mfg
    Woodfighter

    1. Hi,

      Du mußt also zuerst den Wert, den du bekommst zerlegen und dann nur beim Maßzahlanteil die Addition durchführen.

      Wobei das auch nicht unbedingt zum gewünschten Ergebnis führt:

      <div id="test" style="width:50%"></div>

      und
      var width = document.getElementById("test").style.width;

      führt dazu, daß die Variable width den Wert "50%" enthält und nicht die Pixelzahl, die der Hälfte der Breite des containing blocks entspricht.

      Blindlings parseInt anzuwenden und dann Pixel draufaddieren ist also nicht immer zielführend.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  3. Ergänzend zu Posting von Andreas.

    element1.style.height = element2.style.height

    funktioniert.

    nein, tut es nur bedingt.

    Ich gehe davon aus du willst die tatsächliche Höhe des Elementes Wissen willst, oder?
    diese steht in: element2.offsetHeight (ohne einheit)

    Struppi.

    1. Ich gehe davon aus du willst die tatsächliche Höhe des Elementes Wissen willst, oder?
      diese steht in: element2.offsetHeight (ohne einheit)

      Korrekt - Danke für den Hinweis!!! Das hat mir (auch) noch gefehlt!

      Gruss Jense