Méthodes courantes pour obtenir des styles dans Js-js tutoriel-php.cn

Méthodes courantes pour obtenir des styles dans Js

php中世界最好的语言

Libérer： 2017-11-28 15:26:46

original

2610 Les gens l'ont consulté

Nous savons que si vous souhaitez utiliser CSS dans JS, le plus important est d'obtenir le style. Voici un article sur les méthodes les plus courantes pour obtenir des styles dans JS pour votre référence.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      color:yellow;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>

Copier après la connexion

Obtenez le

<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.style.color); //""
  console.log(div.style.backgroundColor); //red
</script>

Copier après la connexion

en utilisant l'attribut element.style L'attribut element.style ne peut obtenir que le style en ligne, pas le < style> style, et ne peut pas obtenir de styles externes

Puisque element.style est un attribut de l'élément, nous pouvons réaffecter l'attribut pour réécrire l'affichage de l'élément.

<script>
    var div = document.getElementsByTagName("div")[0];
    div.style[&#39;background-color&#39;] = "green";
    console.log(div.style.backgroundColor); //green
  </script>

Copier après la connexion

2. Obtenez le style via getComputedStyle et currentStyle

L'environnement d'utilisation de getComputedStyle est chrome/safari/firefox IE 9,10,11

<script>
  var div = document.getElementsByTagName("div")[0];
  var styleObj = window.getComputedStyle(div,null);
  console.log(styleObj.backgroundColor); //red
  console.log(styleObj.color); //yellow
</script>

Copier après la connexion

currentStyle Il peut être parfaitement pris en charge dans IE, Chrome ne le prend pas en charge et ff ne le prend pas en charge

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = div.currentStyle;
    console.log(styleObj.backgroundColor); //red
    console.log(styleObj.color); //yellow
  </script>

Copier après la connexion

3 La différence entre ele.style et getComputedStyle ou currentStyle

3.1 ele. .style est lu et écrit. Et getComputedStyle et currentStyle sont en lecture seule

3.2 ele.style ne peut obtenir que le style CSS défini dans l'attribut de style en ligne, tandis que getComputedStyle et currentStyle peuvent également obtenir d'autres valeurs par défaut.

3.3 ele style obtient le style dans l'attribut style, pas nécessairement le style final, tandis que les deux autres obtiennent le style CSS final de l'élément

4. Obtenez la compatibilité des styles

<script>
    //获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名
    function getStyle(obj,attr){
       //针对IE
       if(obj.currentStyle){
         return obj.currentStyle[attr];               //由于函数传过来的attr是字符串，所以得用[]来取值
       }else{
         //针对非IE
         return window.getComputedStyle(obj,false)[attr];
       }
    }
    function css(obj,attr,value){
       if(arguments.length == 2){
         return getStyle(obj,attr);
       }else{   
         obj.style[attr] = value;
       }
    }
  </script>
 
.window.getComputedStyle(ele[,pseudoElt]);

Copier après la connexion

Si le deuxième paramètre est nul ou omis, l'objet CSSStyleDeclaration de ele sera obtenu

S'il s'agit d'une pseudo-classe, l'objet CSSStyleDeclaration de la pseudo-classe sera obtenu <. 🎜>

<style>
div{
  width:200px;
  height:200px;
  background-color:#FC9;
  font-size:20px;
  text-align:center;  
}
div:after{
  content:"This is after";
  display:block;
  width:100px;
  height:100px;
  background-color:#F93;
  margin:0 auto;
  line-height:50px;  
}
</style>
<body>
  <div id=&#39;myDiv&#39;>
    This is div
  </div> 
  <input id=&#39;btn&#39; type="button" value=&#39;getStyle&#39;/> 
  <script>
    var btn = document.querySelector(&#39;#btn&#39;);
    btn.onclick = function(){
      var div = document.querySelector(&#39;#myDiv&#39;);
      var styleObj = window.getComputedStyle(div,&#39;after&#39;);
      console.log(styleObj[&#39;width&#39;]);
    }
  </script>
</body>

Copier après la connexion

getPropertyValue obtient la valeur de propriété spécifiée dans l'objet CSSStyleDeclaration

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = window.getComputedStyle(div,null);
    console.log(styleObj.getPropertyValue("background-color"));
</script>
 
getPropertyValue(propertyName);中的propertyName不能是驼峰式表示
obj.currentStyle[&#39;margin-left&#39;] 有效
obj.currentStyle[&#39;marginLeft&#39;]  有效   
window.getComputedStyle(obj,null)[&#39;margin-left&#39;]  有效
window.getComputedStyle(obj,null)[&#39;marginLeft&#39;]  有效
window.getComputedStyle(obj,null).getPropertyValue(&#39;margin-left&#39;)  有效
window.getComputedStyle(obj,null).getPropertyValue(&#39;marginLeft&#39;)   无效
obj.currentStyle.width   有效
obj.currentStyle.background-color 无效
obj.currentStyle.backgroundColor  有效
window.getComputedStyle(obj,null).width  有效
window.getComputedStyle(obj,null).background-color  无效
window.getComputedStyle(obj,null).backgroundColor 有效

Copier après la connexion

Pour résumer, les propriétés avec "-" ne peuvent pas être directement cliquées , il existe donc la méthode getProperty

Value , mais vous pouvez utiliser [] pour remplacer getPropertyValue

7.defaultView

Dans de nombreux codes de démonstration en ligne, getComputedStyle est appelé via le objet document.defaultView. Dans la plupart des cas, cela n'est pas nécessaire car il peut être appelé directement via l'

objet fenêtre. Mais il existe une situation dans laquelle vous devez utiliser defaultView. C'est pour accéder au style (iframe) dans le sous-cadre sur Firefox3.6

Je pense que vous maîtrisez la méthode après avoir lu ces cas. veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture connexe :

Comment utiliser CSS pour masquer les divs en HTML

Comment utiliser Vue+CSS3 pour créer des effets interactifs

Comment résoudre le bug selon lequel les expressions emoji ne peuvent pas être envoyées sur le front-end

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!