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:
