HTML-Text durch eine errechnete Variable ersetzen

  • Guten Abend,


    ich möchte diesen enthaltenen Text einer HTML Datei:

    HTML
    <section style="background: white" id="startfolie" class="step slide" data-x="-5000" data-y="-1500">


    durch diesen ersetzen:

    HTML
    <section style="background: white" id="startfolie" class="step slide" data-x="##VARIABLE##" data-y="-1500">


    Wobei ##VARIABLE## errechnet werden soll bzw. aus den CSS Attributen heigth=170vh definiert werden soll
    was in diesem Fall 170% der Viewporthöhe entspricht!


    Vermutlich suche ich mit Herrn Google nach den falschen Stichworten, aber da ich bisher keinen Schimmer von JavaScript habe verzeiht es mir bitte.


    Schönen Abend

  • Style Informationen aus nicht-inline Styles auslesen kannst du wie folgt:


    JavaScript
    var element = document.getElementsById("bored");
        var styleWidth = window.getComputedStyle(element).getPropertyValue("width");


    In der Rückgabe enthalten sind jedoch auch angaben wie px, vh oder %, daher hier ein Weg wie man die Zahl konvertieren kann:



    Wenn du die Höhe jetzt noch entsprechend der Höhe des Fensters in Relation zur Angabe von z.B. vh setzen möchtest ginge das so:



    Das data-x Attribut setzt du einfach mit setAttribute:


    JavaScript
    var element = document.getElementById("bored");
        var result = 170;
    
    
    
    
        element.setAttribute("data-x", result);


    Ich hoffe damit kannst du schon ein bisschen was anfangen, ansonsten einfach nachfragen.

  • Hi Basiii,


    habe ich das richtig verstanden? Kennt java die Viewporthöhe?
    Könnte ich also eine variable so definieren:

    JavaScript
    var abstand = "170vh";
    element.setAttribute("data-x", result);


    und wenn ich dann im HTML-Code (dahinter)

    HTML
    1
    <section style="background: white" id="startfolie" class="step slide" data-x="-5000" data-y="-1500">



    steht, dann hätte der Javacode den Bereich "data-x="-5000" gegen den pixelwert für 170vh ?


    Es wäre mir angenehm, wenn mir jemand mir einen Tip zu lesen solcher Anwendungen geben könnte, statt hier so Newbie-Frage zu stellen.
    Ich habe bisher leider immer nur Material gefunden, die entweder so basic ist, das es mich nicht interessiert oder so unvollständig, das ich den Vorgang zwar verstehe, aber keine Newbie-Info zur praktischen Anwendiung bekomme.

  • Nein ganz so einfach ist es nicht, du sagtest ja in deinem Beispiel soll (so wie ich das verstanden habe) der data-x Wert mit 170vh in Pixel umgerechnet bestückt werden, nun schau dir bitte mal den 39 zeiligen Quellcode aus meinem letzten Beitrag genauer an, ich ging vor wie folgt:


    170vh entspricht 170% viewport height, also 1,7 mal die Fensterhöhe.


    Jetzt können wir mittels JavaScript die aktuelle Höhe des Viewports feststellen (die Funktion von Zeile 27 - 39 erledigt das für uns).


    Alles was wir jetzt noch machen müssen ist die Höhe des Viewports zu nehmen und im Dreisatz auf 170% kalkulieren.


    z.B.: Die Funktion teilt uns mit die Viewport-Höhe beträgt 980px, wir rechnen diese Zahl nun durch 100 um auf 1% zu kommen, ergibt 9,8, jetzt noch mit den 170% mal nehmen ergibt 1666 Pixel. Wir wissen nun das 170% der Viewporthöhe 1666 Pixel entspricht, also 170vh = 1666px.


    Diesen Wert können wir dann in data-x eintragen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!