Wie bekomme ich den CSS-Stil in 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 erhalten und das Festlegen des Stils hängt nur vom StilAttribut ab, da das Attribut element.style eine Reihe von Stilattributen und entsprechenden Werten zurückgibt, die dem Array ähneln, sodass Sie darauf zugreifen können Spezifischer Stil Es werden zwei Methoden übernommen, nämlich „ele.style.Attribute name“ und „ele.style['Attribute name']“. Es ist jedoch zu beachten, dass für Attributnamen im CSS-Stil beispielsweise „background-color“ (z. B. „ele.style.backgroundColor“) gilt Das Stilattribut kann nur den Inline-Stil abrufen. 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 document.defaultView
objects getComputedStyle(ele, null/pseudo-class ) Methode, diese Methode akzeptiert zwei Parameter, der erste ist das zu prüfende Element und der zweite hängt von der Situation ab. Wenn nur das Element selbst geprüft wird, ist es null, wenn die Pseudoklasse geprüft werden soll. es ist 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 es gibt ein aktuelles
, das dem Stilattribut für jedes Tag-Element ähnelt . Eigenschaft von Style, und ihre Verwendung ist die gleiche wie die Stilverwendung. 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 basierend auf diesen beiden unterschiedlichen Verarbeitungsmethoden erstellen, um Kompatibilität zu erreichen, sodass Sie unabhängig von der Art des Browsers erfolgreich die erhalten können Stil . Wie unten gezeigt:

Das obige ist der detaillierte Inhalt vonWie bekomme ich den CSS-Stil in JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!