ホームページ > 記事 > ウェブフロントエンド > Js でスタイルを取得する一般的な方法

Js でスタイルを取得する一般的な方法

php中世界最好的语言オリジナル: 2017-11-28 15:26:462565ブラウズ

JS で CSS を操作したい場合、最も重要なことはスタイルを取得することであることは承知しています。参考までに、JS でスタイルを取得する最も一般的な方法についての記事を示します。

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

element.style 属性を使用して取得します

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

element.style 属性は、c9ccee2e6ea535a969eb3f532ad9fe89 タグ内のスタイルや外部スタイルではなく、インラインスタイルのみを取得できます

element.style は要素の属性を使用すると、属性を再割り当てして要素の表示を変更できます。

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

2. getComputedStyle と currentStyle を通じてスタイルを取得します

getComputedStyle の使用環境は 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>

currentStyle は IE で完全にサポートされていますが、chrome はサポートしていません。はサポートしていません

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

3. ele.style と getComputedStyle または currentStyle の違い

3.1 ele.style は読み取り/書き込みですが、getComputedStyle と currentStyle は読み取り専用です

3.2 ele.style は CSS スタイルのみを取得できます。そして、getComputedStyle と currentStyle は他のデフォルト値も取得できます

3.3 ele.style は、必ずしも最終的なスタイルではなく、style 属性のスタイルを取得しますが、他の 2 つは要素の最終的な CSS スタイルを取得します

4.スタイル互換記述メソッドを取得します

<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]);

第二引数がnullまたは省略された場合はeleのCSSStyleDeclarationオブジェクトを取得します

擬似クラスの場合は擬似クラスのCSSStyleDeclarationオブジェクトを取得します

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

getPropertyValue 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 有效

まとめると、「-」が付いたプロパティは直接クリックできないため、それを処理するgetPropertyValueメソッドがありますが、 [] getPropertyValue

7.defaultView

を置き換えます。多くのオンラインデモコードでは、getComputedStyle は document.defaultView オブジェクトを通じて呼び出されます。

window オブジェクトを通じて直接呼び出すことができるため、ほとんどの場合、これは必要ありません。ただし、defaultView を使用しなければならない状況が 1 つあります。それは、Firefox3.6 のサブフレーム内のスタイル (iframe) にアクセスすることです

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注意してください。その他の関連トピックについては、PHP 中国語 Web サイトの記事をご覧ください。

Js でスタイルを取得する一般的な方法

関連記事