Wie rufe ich HTML-Elementstilwerte in JavaScript browserübergreifend ab?

HTML-Elementstilwerte in JavaScript abrufen

Für Elemente mit Stilen, die über das Style-Tag definiert werden, wie unten dargestellt:

<style>
#box {
  width: 100px;
}
</style>

<div>

Um Stilwerte mit JavaScript abzurufen, reicht die Eigenschaft element.style allein nicht aus, da Es stellt nur Inline- oder JavaScript-definierte Stile bereit.

Berechnete Stile

Wir müssen auf den berechneten Stil des Elements zugreifen, der den tatsächlichen Stil darstellt wird darauf angewendet, nachdem von übergeordneten Elementen geerbt und die angewendeten CSS-Regeln berücksichtigt wurden. In JavaScript können wir berechnete Stile mit zwei Methoden erhalten:

1. DOM-Standard (Andere Browser):

document.defaultView.getComputedStyle(element, null).getPropertyValue(propertyName);

2. IE-spezifisch:

element.currentStyle[propertyName];

Der IE verwendet jedoch camelCase-Eigenschaftsnamen (z. B. „font-Size“) und gibt möglicherweise Größen in Nicht-Pixel-Einheiten zurück, während die Standardmethode Eigenschaftsnamen mit Bindestrich verwendet ( z.B. „font-size“) und liefert immer Pixelwerte.

Cross-Browser Lösung

Um berechnete Stile browserübergreifend abzurufen, verwenden Sie die folgende Funktion:

function getStyle(element, property) {
  var value, defaultView = (element.ownerDocument || document).defaultView;
  // Sanitize property name for different browsers
  property = property.replace(/([A-Z])/g, "-").toLowerCase();

  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    // Convert camelCase property name to hyphenated
    property = property.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });

    value = element.currentStyle[property];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = element.style.left, oldRsLeft = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft + "px";
        element.style.left = oldLeft;
        element.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Das obige ist der detaillierte Inhalt vonWie rufe ich HTML-Elementstilwerte in JavaScript browserübergreifend ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!