Wie rufe ich den CSS-Stilwert eines HTML-Elements mit reinem JavaScript ab?-CSS-Tutorial-php.cn

Wie rufe ich den CSS-Stilwert eines HTML-Elements mit reinem JavaScript ab?

Linda Hamilton

Freigeben： 2025-01-05 07:40:38

Original

829 Leute haben es durchsucht

How to Retrieve an HTML Element's CSS Style Value Using Pure JavaScript?

Zugriff auf Stilwerte von HTML-Elementen in JavaScript

Man kann auf die Notwendigkeit stoßen, die Stile von einem HTML-Element abzurufen, das in definiert wurde CSS-Stylesheet. Betrachten Sie beispielsweise den folgenden HTML- und CSS-Code:

<style>
  #box { width: 100px; }
</style>
<body>
  <div>

Nach dem Login kopieren

Wie können Sie den Wert für die Eigenschaft width abrufen, wenn Sie nur reines JavaScript ohne Bibliotheken verwenden? Die folgenden Versuche führen häufig zum Empfang leerer Werte:

alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));

Nach dem Login kopieren

Diese Versuche schlagen fehl, da sie nur mit Inline-Stilen funktionieren, die im Stilattribut des Elements definiert sind. Um berechnete Stile abzurufen, ist ein anderer Ansatz erforderlich.

Browserübergreifende Kompatibilität

Der Zugriff auf berechnete Stile stellt aufgrund der Unterschiede zwischen den Browsern eine Herausforderung dar. Internet Explorer verwendet die Eigenschaft element.currentStyle, während andere Browser mit document.defaultView.getComputedStyle dem DOM Level 2-Standard folgen. Darüber hinaus behandelt IE Eigenschaftsnamen mit zwei oder mehr Wörtern unterschiedlich und verwendet „camelCase“ (z. B. „maxHeight“). Andere Browser erwarten Bindestriche, um Wörter zu trennen (z. B. „max-height“).

Browserübergreifende Funktion

Um diese browserübergreifenden Unterschiede zu beheben, gibt es die folgende Funktion kann verwendet werden:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView &amp;&amp; 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 (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;
  }
}

Nach dem Login kopieren

Diese Funktion bietet browserübergreifende Kompatibilität für den Zugriff auf berechnete Stile und verarbeitet sowohl Standard- als auch IE-spezifische Stile Verhalten. Beachten Sie, dass möglicherweise nicht alle Fälle behandelt werden, z. B. Farben, die von verschiedenen Browsern unterschiedlich zurückgegeben werden.

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