Wie rufe ich Stilwerte aus HTML-Elementen mit reinem JavaScript ab?

Abrufen von Stilwerten aus einem HTML-Element mit JavaScript

Das Abrufen der Stilattribute eines HTML-Elements ist für die dynamische Manipulation seines Erscheinungsbilds von entscheidender Bedeutung. Dieser Artikel befasst sich mit den Nuancen des Abrufens von Stilwerten mit reinem JavaScript, ohne die Hilfe externer Bibliotheken.

CurrentStyle vs. Computed Properties

Um auf Stilwerte zuzugreifen, Wir müssen zwischen Inline-Stilen (definiert im Stilattribut des Elements) und berechneten Eigenschaften (den tatsächlich angewendeten Stilen) unterscheiden.

Internet Explorer verwendet die element.currentStyle-Eigenschaft zum Abrufen von Inline-Stilen, die Werte in ihren ursprünglichen Einheiten enthalten.

Mozilla und andere moderne Browser verlassen sich auf die Methode document.defaultView.getComputedStyle, um berechnete Eigenschaften bereitzustellen. Diese Werte werden auf Pixel normiert und sorgen so für eine konsistente Darstellung in allen Browsern.

Browserübergreifende Lösung

Die folgende Funktion bietet eine browserübergreifende Lösung zum Abrufen sowohl von Inline- als auch Berechnete Stile:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // Convert styleProp to compatible notation
  styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
  // Modern browsers: computed properties
  if (defaultView && defaultView.getComputedStyle) {
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE: inline properties
    // Convert styleProp to camelCase notation
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // Normalize units on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Beispiel

Zum Abrufen die Inline-Breiteneigenschaft eines Elements mit der ID „box“ (festgelegt über ein Stil-Tag):

alert (getStyle(document.getElementById("box"), "width"));

Um die berechnete Breiteneigenschaft abzurufen, die alle kaskadierenden oder geerbten Stile berücksichtigt:

alert (getStyle(document.getElementById("box"), "width"));

Einschränkungen

Diese Funktion verarbeitet Farbwerte nicht perfekt. Die modernen Browser geben Farben in der RGB-Notation zurück, während der IE ihre ursprüngliche Definition beibehält.

Das obige ist der detaillierte Inhalt vonWie rufe ich Stilwerte aus HTML-Elementen mit reinem JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!