Comment obtenir le style CSS en analysant 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, l'obtention et la définition du style dépendent uniquement du style. attribut C'est très bien, car la propriété element.style renvoie un ensemble de propriétés de style de type tableau et les valeurs correspondantes. Par conséquent, il existe deux manières d'accéder à un style spécifique, à savoir "ele.style.property name" et "ele.style[. 'nom de la propriété']". Cependant, il convient de noter que pour les noms d'attribut reliés par des tirets tels que background-color; margin-left dans le style CSS, lors de l'utilisation de l'attribut style pour obtenir et définir le style, le nom doit être remplacé par camel case, par exemple comme 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 la méthode getComputedStyle(ele, null/pseudo-class) de l'objet document.defaultView. Cette méthode accepte deux paramètres. Le premier est l'élément à inspecter et le second. is Selon la situation, si vous examinez simplement l'élément lui-même, ce sera nul. Si vous souhaitez examiner la pseudo-classe, ce sera 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 chaque élément de balise a un attribut similaire au currentStyle de l'attribut style, et l'utilisation est la même L'utilisation du style est la même. 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é pendant le 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, le style puisse être obtenu avec succès. 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 de l'analyse de js pour obtenir le style CSS. Pour plus de contenu connexe, veuillez. faites attention à PHP Chinese Net (www.php.cn) !