Wie greife ich in JavaScript auf HTML-Elementstilwerte zu, ohne Bibliotheken zu verwenden?

Zugriff auf Stilwerte von HTML-Elementen in JavaScript ohne Bibliotheken

Einführung:

Die Manipulation der Stilattribute eines HTML-Elements ist von entscheidender Bedeutung Aspekt dynamischer Webanwendungen. In dieser Frage wird untersucht, wie Stilwerte von einem Element abgerufen werden, dessen Stile über

Stilwerte abrufen:

Um die mit dem

Browserübergreifender Ansatz:

Abrufen Berechnete Stile browserübergreifend zu verwenden, kann schwierig sein. Internet Explorer (IE) verfügt über einen eigenen Mechanismus, element.currentStyle, während andere Browser die Methode document.defaultView.getComputedStyle verwenden.

Cross-Browser-Funktion:

Zu Um diese browserübergreifende Implementierung zu vereinfachen, kann eine Funktion namens getStyle() definiert werden:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView && defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) {
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return convertIEValueToPixels(value);
    }
    return value;
  }
}

Diese Funktion bereinigt die Eigenschaft Name für browserübergreifende Kompatibilität und verwaltet die Einheitenkonvertierung im IE.

Verwendung:

Um eine bestimmte Stileigenschaft abzurufen, verwenden Sie die Funktion getStyle() mit der gewünschten Eigenschaft Name, wie zum Beispiel:

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

Einschränkungen:

Der Die Funktion getStyle() bietet einen nützlichen browserübergreifenden Ansatz. Allerdings gibt es Einschränkungen, insbesondere bei der Handhabung bestimmter Eigenschaften, wie z. B. Farben, bei denen der IE möglicherweise den definierten Wert anstelle des berechneten Werts zurückgibt. Beispielsweise könnte eine als #ff0000 definierte Farbeigenschaft beim Aufruf von getStyle().

Rot zurückgeben

Das obige ist der detaillierte Inhalt vonWie greife ich in JavaScript auf HTML-Elementstilwerte zu, ohne Bibliotheken zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!