Probleme mit den Style Attributen, selbst mit getComputedStyle

NetAktiv · Gestern um 19:48

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>

NetAktiv · Heute um 19:09

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');

Sempervivum · Heute um 19:37

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.

NetAktiv · 2025-09-04T21:51:46+0200

Sempervivum schrieb:
es sei denn, Du fragst direkt den Wert ab mit rrFlexCard.style.width

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.

Probleme mit den Style Attributen, selbst mit getComputedStyle

NetAktiv

Senior HTML'ler

NetAktiv

Senior HTML'ler

Sempervivum

Senior HTML'ler

NetAktiv

Senior HTML'ler

Neueste Beiträge