HTML-Elementstilwerte in JavaScript abrufen In JavaScript ist das Abrufen des Inline-Stils eines Elements unkompliziert. Der Zugriff auf Stile, die über die Funktion festgelegt wurden, ist jedoch nicht möglich. -Tag erfordert einen etwas anderen Ansatz.</p> <p>Um berechnete Stilwerte abzurufen, stellt JavaScript die Methode getComputedStyle bereit, auf die über das document.defaultView-Objekt zugegriffen werden kann. Diese Methode standardisiert den browserübergreifenden Abruf und stellt Werte in Pixeleinheiten konvertiert dar. So verwenden Sie es:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let element = document.getElementById("box"); let width = getComputedStyle(element).getPropertyValue("width");</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Für ältere Browser wie Internet Explorer ist ein anderer Ansatz erforderlich. IE unterstützt die Eigenschaft element.currentStyle, die Namen von Stileigenschaften im CamelCase-Format erwartet und Werte in ihren Originaleinheiten zurückgibt:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let width = element.currentStyle.width;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Um die browserübergreifende Kompatibilität sicherzustellen, können Sie eine Hilfsfunktion wie die folgende verwenden: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(element, styleProp) { let value; if (document.defaultView && document.defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); value = getComputedStyle(element).getPropertyValue(styleProp); } else if (element.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, str => str[1].toUpperCase()); value = element.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return convertPixelValue(value); } else { return value; } } return value; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Diese Funktion verarbeitet Unterschiede zwischen Browsern und konvertiert IE-Legacy-Eigenschaften und Einheitenformate, um sie an den Standard anzupassen. Mit diesem Helfer können Sie berechnete Stilwerte konsistent über alle Browser hinweg abrufen.</p>
