So erhalten Sie den CSS-Stil durch Parsen von JS

1. Holen Sie sich den Inline-Stil

<p id ="myp" style="width:100px;height:100px;background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");

  alert(myp.style.width);//100px

  alert(myp.style[&#39;height&#39;]);//100px

  var style=myp.style;
  alert(style.backgroundColor);//red

  myp.style.backgroundColor=&#39;green&#39;;//myp背景色变为绿色 
</script>

In diesem Fall hängt das Abrufen und Festlegen des Stils nur vom Stil ab attribute Das ist in Ordnung, denn die Eigenschaft element.style gibt einen Array-ähnlichen Satz von Stileigenschaften und entsprechenden Werten zurück. Daher gibt es zwei Möglichkeiten, auf einen bestimmten Stil zuzugreifen, nämlich „ele.style.property name“ und „ele.style[. ' Eigenschaftsname']". Es ist jedoch zu beachten, dass bei Verwendung des Stilattributs zum Abrufen und Festlegen des Stils für Attributnamen, die durch Bindestriche verbunden sind, wie z als ele.style.backgroundColor.

2 Weil die erste Methode, also die Verwendung des Style-Attributs, nur den Inline-Stil abrufen kann. Die tatsächliche Situation ist jedoch, dass Dokumente im Wesentlichen der Idee der Trennung folgen und die Stile im Wesentlichen externe Links sind. Daher müssen die drei Stile in Betracht gezogen werden. In diesem Fall müssen andere Methoden verwendet werden, um sie zu erhalten. In diesem Fall verfügen verschiedene Browser beim Abrufen von Stilen über unterschiedliche Verarbeitungsmethoden (hauptsächlich IE und Nicht-IE). kann daher je nach Browser in zwei Methoden unterteilt werden:

(2.1) In Nicht-IE-Browsern verwenden Sie die Methode getComputedStyle(ele, null/pseudo-class) des document.defaultView-Objekts. Der erste ist das zu prüfende Element und der zweite Wenn Sie nur das Element selbst untersuchen, ist es je nach Situation null. Wenn Sie die Pseudoklasse untersuchen möchten, ist es die Pseudoklasse der Antwort. Die endgültige Stilkombination, die auf das mit dieser Methode erhaltene Element angewendet wird, ist ebenfalls eine Instanz eines ähnlichen Arrays.

(2.2) Im IE-Browser wird die Methode getComputedStyle() nicht unterstützt, aber jedes Tag-Element verfügt über ein Attribut, das dem currentStyle des Stilattributs ähnelt, und die Verwendung ist dieselbe Die Verwendung von Stil ist dieselbe. Es ist nur so, dass die Bandbreite der erhaltenen Stile unterschiedlich ist. Der erhaltene currenStyle ähnelt der Methode getComputedStyle().

Um während der Verarbeitung Kompatibilität zu erreichen, können Sie eine Funktion erstellen, die auf diesen beiden unterschiedlichen Verarbeitungsmethoden basiert, um Kompatibilität zu erreichen, sodass der Stil unabhängig von der Art des Browsers erfolgreich erhalten werden kann. Wie unten gezeigt:

<style type="text/css">
#myp {
  background-color:blue;
  width:100px;
  height:200px;
}
</style>
<p id ="myp" style="background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");
  var finalStyle = myp.currentStyle ? myp.currentStyle : document.defaultView.getComputedStyle(myp, null);/*利用判断是否支持currentStyle（是否为ie）
  来通过不同方法获取style*/
  alert(finalStyle.backgroundColor);  //"red"
  alert(finalStyle.width);       //"100px"
  alert(finalStyle.height);       //"200px"
</script>

Das Obige ist der Inhalt des Parsens von js, um den CSS-Stil zu erhalten Achten Sie auf PHP Chinese Net (m.sbmmt.com)!