Wie kann ich berechnete Stilwerte für HTML-Elemente in verschiedenen Browsern in JavaScript abrufen?

HTML-Elementstilwerte in Javascript extrahieren

Um Stilattribute zu erhalten, die über Inline-CSS oder Stil-Tags zugewiesen wurden, ist es notwendig, den berechneten Stil abzurufen und nicht nur die style-Eigenschaft des Elements. Dazu gehört die Verwendung browserübergreifender kompatibler Methoden wie document.defaultView.getComputedStyle und element.currentStyle.

Browserübergreifende Kompatibilität

Internet Explorer verwendet element.currentStyle während andere Browser Halten Sie sich an die Standardmethode document.defaultView.getComputedStyle. Beachten Sie, dass IE CSS-Eigenschaftsnamen im CamelCase-Format erwartet, während das Standardformat Bindestriche verwendet.

Einheitenumrechnung im IE

IE gibt Größen in Originaleinheiten zurück, während das Standardformat Die Methode konvertiert immer in Pixel. Die bereitgestellte getStyle-Funktion berücksichtigt dies, indem sie bei Bedarf Einheiten im IE konvertiert.

Farbformat

Die Standardmethode gibt Farbwerte in RGB-Notation zurück, während IE sie als anzeigt definiert. Die getStyle-Funktion verarbeitet möglicherweise nicht alle Fälle perfekt, insbesondere bei Farbformaten.

Benutzerdefinierte Funktion für den berechneten Stilabruf

Die folgende getStyle-Funktion bietet einen browserübergreifenden Ansatz für Berechnete Stile abrufen:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    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;
  }
}

Das obige ist der detaillierte Inhalt vonWie kann ich berechnete Stilwerte für HTML-Elemente in verschiedenen Browsern in JavaScript abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!