Wie kann ich die Stilwerte eines HTML-Elements in JavaScript abrufen, ohne externe Bibliotheken zu verwenden?

Stilwerte von HTML-Elementen in JavaScript abrufen

Um Stilinformationen von einem HTML-Element abzurufen, das mit der Funktion

Browserübergreifende Kompatibilität

IE verwendet die Eigenschaft element.currentStyle, während andere Browser die Eigenschaft verwenden Implementieren Sie die DOM Level 2-Methode document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp). Um diesen Unterschied zu bewältigen, wird eine browserübergreifende Funktion bereitgestellt:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // Sanitize property name to CSS notation (e.g., 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;
  }
}

Beispielverwendung für Ihr Code-Snippet

Um den Breitenwert im bereitgestellten Code-Snippet zu erhalten , verwenden Sie Folgendes:

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

Das obige ist der detaillierte Inhalt vonWie kann ich die Stilwerte eines HTML-Elements in JavaScript abrufen, ohne externe Bibliotheken zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!