Zugriff auf Stile aus HTML-Elementen mit JavaScript Frage: Wie kann ich die abrufen? Berechnete Stilwerte eines HTML-Elements mithilfe von JavaScript, insbesondere wenn die Stile im definiert sind. tag?</p> <p><strong>Lösung:</strong></p> <p>Um die berechneten Stilwerte zu erhalten, ist es notwendig, auf den berechneten Stil des Elements zuzugreifen. Es gibt zwei Ansätze: die von den meisten Browsern unterstützte Standard-DOM-Level-2-Methode und die IE-spezifische element.currentStyle-Eigenschaft.</p> <p><strong>Standardmethode (W3C):</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; if (defaultView && defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Hier müssen Eigenschaftsnamen im durch Bindestrich getrennten Format angegeben werden (z. B. „Schriftgröße“). Werte werden in Pixel zurückgegeben.</p> <p><strong>IE-Methode:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>if (el.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { // Convert non-pixel units to pixels ... } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>IE erwartet, dass Eigenschaftsnamen im CamelCase-Format vorliegen und gibt Werte in den angegebenen Einheiten zurück. Beachten Sie, dass diese Methode bestimmten Einschränkungen unterliegt.</p> <p><strong>Beispielverwendung:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var element = document.getElementById("box"); var width = getStyle(element, "width"); console.log("Width: " + width);</pre><div class="contentsignin">Nach dem Login kopieren</div></div>
