Comment obtenir le style CSS dans js

1. Obtenez le style en ligne

<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>

Dans ce cas, obtenir et la définition du style ne dépend que de l'attribut style, car l'attribut element.style renvoie un ensemble d'attributs de style et de valeurs correspondantes similaires au tableau, vous pouvez donc accéder à des éléments spécifiques styles Deux méthodes sont adoptées, à savoir "ele.style.Attribute name" et "ele.style['Attribute name']". Cependant, il convient de noter que pour les noms d'attributs dans le style CSS tels que background-color; , tels que ele.style.backgroundColor.
2. Parce que la première méthode, c'est-à-dire utiliser l'attribut style, ne peut obtenir que le style en ligne.
Cependant, la situation réelle est que les documents suivent désormais fondamentalement l'idée de séparation, et les styles sont essentiellement des liens externes, donc les trois styles doivent être pris en compte. Dans ce cas, d'autres méthodes doivent être utilisées pour les obtenir. Dans ce cas Lors de l'obtention de styles, différents navigateurs ont des méthodes de traitement différentes (principalement IE et non-IE), il peut donc être divisé en deux méthodes selon le navigateur : (2.1)
Dans les navigateurs non
ie, utilisez le getComputedStyle(ele, null/pseudo-classobject 🎜> ), cette méthode accepte deux paramètres, le premier est l'élément à inspecter, et le second dépend de la situation. Si seul l'élément lui-même est inspecté, il est nul. Si la pseudo-classe doit être inspectée, c'est la pseudo-classe de la réponse. La combinaison de styles finale appliquée à l'élément obtenu par cette méthode est également une instance d'un tableau similaire. (2.2) Dans le navigateur IE
, la méthode getComputedStyle() n'est pas prise en charge, mais il existe un
current qui est similaire à l'attribut de style pour chaque élément de balise . Propriété de Style, et son utilisation est la même que celle du style. C'est juste que la gamme de styles obtenue est différente. Le currenStyle obtenu est proche de la méthode getComputedStyle(). Afin d'obtenir la compatibilité lors du traitement, vous pouvez créer une fonction
basée sur ces deux méthodes de traitement différentes pour obtenir la compatibilité, de sorte que quel que soit le type de navigateur, vous puissiez obtenir avec succès le style . Comme indiqué ci-dessous :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!