• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit den Style Attributen, selbst mit getComputedStyle

NetAktiv

NetAktiv

Senior HTML'ler
Ich habe den Code nochmals auf das Wesentliche reduziert. Wie komme ich bei Karte 1 auf die width von 12em, die durch die class gesetzt wurde?

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>     
    <title>Flexgrid sample</title>
    <style>        
        .rr-flex-card { text-align: center; border; background-color:#FFFFCC; 1px solid; padding: 0.5em; margin: 0.5em; width: 12em;}
    </style>
</head>
<body>    
    <div  id="rr-flex-card-1" class="rr-flex-card">Text Karte (1) </div>
    <div  id="rr-flex-card-2" class="rr-flex-card" style="width:12em;">Text Karte (2)</div>        
</body>
</html>
<script>
    
    function getFlexCssAttributes(nr) {
        rrFlexCard                  = document.getElementById(`rr-flex-card-${nr}`);
        rrFlexCardWidthDirect   = rrFlexCard.style.width;
        rrFlexCardStyleComputed = window.getComputedStyle(rrFlexCard);
        rrFlexCardWidthComputed    = rrFlexCardStyleComputed.getPropertyValue('width');

        rrFlexStyleValues  = `Werte Karte Nr ${nr} <br>width computed: <b>${rrFlexCardWidthComputed}</b><br>width direkt: <b>${rrFlexCardWidthDirect}</b>`;
        rrFlexCard.innerHTML = rrFlexStyleValues;            
    }
    
    getFlexCssAttributes(1);
    getFlexCssAttributes(2);
</script>
 
Zuletzt bearbeitet:
Ich habe nun bei Stack Overflow eine Lösung gefunden, aber wirklich gefallen tut sie mir nicht. Man erstellt ein temporäres Element mit der entsprechenden Klasse und liest sofort die CCS Daten aus. Allerdings erhält man die wieder in px, also habe ich die Höhe auf 1em gesetzt und das Verhältnis zum Umrechnen benutzt. Für mich besteht nach wie vor die Frage, ob das nicht direkt und einfacher geht.

Javascript: 
    var dummy = document.createElement('div');
    dummy.className = 'rr-flex-card';
    dummy.innerHTML = 'created by JavaScript';
    dummy.style['height'] = '1em';
    dummy.style['display'] = 'none';
    document.body.appendChild(dummy);
    myWidth  = window.getComputedStyle(dummy).getPropertyValue('width');
    myHeight = window.getComputedStyle(dummy).getPropertyValue('height');   
    dummy.remove();
    console.log("Width:" + myWidth + " | 1em:" + myHeight + " | Width in em:" + myWidth.replace('px','')/myHeight.replace('px','') + 'em');
 
Wie Du in deinen Beispielen beobachtest, liefert JS die Werte in px, es sei denn, Du fragst direkt den Wert ab mit rrFlexCard.style.width
Was hast Du denn genau vor, in welchem Zusammenhang steht das Problem? Ich vermute, Du willst in JS einem Element eine Abmessung in em geben? Das sollte gehen, wenn Du ebenfalls style.width setzt mit em als Maßeinheit.
 
Sempervivum schrieb:
es sei denn, Du fragst direkt den Wert ab mit rrFlexCard.style.width
Zum Vergrößern anklicken....
Das ist ja identisch zu rrFlexCard.style['width'] und das liefert nur Werte, die mit <div style='width:'> oder JavaScript gesetzt wurden, nicht aber von CSS-Klassen gesetzte Attribute, da bleibt es leer. Daher der Umweg über computedStyle. Ich habe ein Formular gebastelt, bei dem man die Werte zum Test eingeben kann. Ich wollte der Bequemlichkeit halber alle aktuellen Werte abfragen, nicht nur geänderte, und dabei fiel mir halt dieses Verhalten auf, dass man bei dynamisch berechneten Werten wie Maße von Elementen in Grids, nicht mehr an die original Style-Angaben aus der CSS-Klasse kommt.
 
Sempervivum schrieb:
Die Frage hast Du noch nicht beantwortet. Wozu brauchst Du die Werte in em? Was ist die Aufgabe, was willst Du programmieren?
Zum Vergrößern anklicken....
Ich brauche das nicht in em, ich hätte auch pixel-Eingabe vorgeben können. Aber das Grundproblem war ja, dass ich weder das eine noch das andere auslesen konnte. Das Umrechnen in em war dann nur noch Kosmetik, hat mich halt interessiert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben