Wie erhalte ich die Stilwerte eines HTML-Elements in verschiedenen Browsern?

So rufen Sie die Stilwerte eines HTML-Elements in JavaScript ab

Das Abrufen von Stilwerten aus HTML-Elementen ist wichtig, um das Erscheinungsbild von Elementen dynamisch zu manipulieren. Während das Festlegen von Stilen mithilfe von JavaScript unkompliziert ist, kann der Zugriff auf in Stil-Tags definierte Stile schwierig sein.

Überlegungen zu browserübergreifenden Elementen

Der Zugriff auf Elementstile erfordert einen browserübergreifenden Ansatz. Internet Explorer verwendet seine eigene Eigenschaft currentStyle, während andere Browser dem W3C-Standard folgen und document.defaultView.getComputedStyle verwenden.

Benutzerdefinierte Cross-Browser-Funktion

Zur Handhabung von Cross -Browser-Inkonsistenzen, häufig eine benutzerdefinierte Funktion beschäftigt:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels 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;
  }
}

Verwendung

So rufen Sie die Stileigenschaft eines Elements ab:

var element = document.getElementById("box");
var width = getStyle(element, "width");

Aktuelle Überlegungen

Die obige Funktion verarbeitet möglicherweise nicht alle Randfälle, insbesondere bei Farben, bei denen der zurückgegebene Wert zwischen IE und anderen abweichen kann Browser.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Stilwerte eines HTML-Elements in verschiedenen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!