Wie erhalte ich mit JavaScript berechnete Stilwerte aus HTML-Elementen?

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?

Lösung:

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.

Standardmethode (W3C):

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); } } Hier müssen Eigenschaftsnamen im durch Bindestrich getrennten Format angegeben werden (z. B. „Schriftgröße“). Werte werden in Pixel zurückgegeben.

IE-Methode:

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 ... } } 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.

Beispielverwendung:

var element = document.getElementById("box"); var width = getStyle(element, "width"); console.log("Width: " + width);