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

[ERLEDIGT] 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.
 
Der Grund dafür, dass getComputedStyle die Werte in Pixel liefert ist sicherlich, dass es sich leichter rechnet, wenn man sich auf eine Einheit fest legt. Neben px und (r)em gibt es ja auch noch % und vw/vh. Das würde voll unübersichtlich wenn JS das alles unterstützen würde. Und px ist die natürliche Einheit wenn ein Layout gerendert wird, die Anzeige besteht ja aus Pixeln.
Außerdem: Ich programmiere schon eine ganze Weile in JS und dabei bestand noch nie die Notwendigkeit, die Maßeinheit em zu verwenden.
 
Beim computedStyle, der ja für internen Gebrauch des Browsers ist, und den man nur lesen kann, würde ich auch nur interne Einheiten erwarten. Aber ich hätte auch erwartet, dass man irgendwie an die Originalwerte kommt, die aus der CSS Klasse gelesen werden.
 
ich hätte auch erwartet, dass man irgendwie an die Originalwerte kommt, die aus der CSS Klasse gelesen werden.
Zum Vergrößern anklicken....
Dafür gilt natürlich auch: "Geht nicht gibt's nicht". Wie man an die Werte heran kommt wird hier beschrieben:
stackoverflow.com

Get a CSS value from external style sheet with Javascript/jQuery

Is it possible to get a value from the external CSS of a page if the element that the style refers to has not been generated yet? (the element is to be generated dynamically). The jQuery method I've
stackoverflow.com stackoverflow.com
Der Grund dafür, dass es nicht auf direktem Wege geht, ist wahrscheinlich, dass in der Praxis kaum je die Notwendigkeit besteht.
 
Sempervivum schrieb:
Dafür gilt natürlich auch: "Geht nicht gibt's nicht". Wie man an die Werte heran kommt wird hier beschrieben:
stackoverflow.com

Get a CSS value from external style sheet with Javascript/jQuery

Is it possible to get a value from the external CSS of a page if the element that the style refers to has not been generated yet? (the element is to be generated dynamically). The jQuery method I've
stackoverflow.com stackoverflow.com
Der Grund dafür, dass es nicht auf direktem Wege geht, ist wahrscheinlich, dass in der Praxis kaum je die Notwendigkeit besteht.
Zum Vergrößern anklicken....
Das ist doch die gleiche Lösung wie meine von Stack Overflow, man generiert ein temporäres Element, liest die Attribute und löscht es wieder. Nur kommt meine mit native JavaScript daher, ohne jQuery. Ich habe es auch nicht unbedingt gebraucht, ich hatte nämlich von Anfang an einen Workaround. Ich komme ja an die Attribute nur so lange nicht, wie sie nicht mit JavaScript geändert wurden. Also kann ich einfach im Load-Event die Attribute initial setzen. Ich muss dann nur zur Vermeidung von Inkonsistenzen aufpassen, dass meine Class synchron zu meinem JavaScript bleibt, was aber auch nur für die Optik ist. Das kann ich leicht erreichen, da ich meine Seiten über PHP erstelle. Aber wie gesagt, es hat mich interessiert, Notwendigkeit war nicht meine Triebfeder.
 
Sempervivum schrieb:
Sondern arbeitet mit document.stylesheets.
Zum Vergrößern anklicken....
Das liefert doch die statischen Style-Ergebnisse und nicht die Werte, die aktuell gesetzt sind. Ich brauch ja beides, die Style Werte am Anfang, weil noch nichts gesetzt ist und später die aktuellen Werte. Da ist meine Lösung mit 1-maligem Setzen der Werte beim Load das Einfachste, auch wenn es theoretisch zu Inkonsistenzen kommen kann zu den Style-Werten. Aber die interessieren ja nicht, wichtig ist, was man im Browser ausliest und an der Oberfläche sieht. Für mich ist das Problem erledigt, man kommt nicht an dynamische Klassenwerte über das Element.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben