jsはインターラインスタイルと現在のスタイルのコードを取得します-jsチュートリアル-php.cn

jsはインターラインスタイルと現在のスタイルのコードを取得します

不言

リリース： 2018-08-20 17:46:10

オリジナル

1573 人が閲覧しました

この記事の内容は、js でのインターラインスタイルと現在のスタイルを取得するためのコードです。必要な方は参考にしていただければ幸いです。

インターラインスタイル style を取得します

<!DOCTYPE html>
<html>
<head>
  <title>获取行间样式</title>
  <script>
    window.onload=function(){
      op=document.getElementById("p1");
      alert(op.style.width);
    }
  </script>
</head>
<body>
  <p id="p1" style="width:100px; height:100px; background:#f00;"></p>
</body>
</html>

ログイン後にコピー

要素の現在のスタイルを取得します currentStyle (ie) および getComputedStyle (非 ie) 互換メソッド

<!DOCTYPE html>
<html>
<head>
  <title>获取样式兼容写法</title>
  <script>
    function getStyle(obj,name){
      if(obj.currentStyle){
        return obj.currentStyle[name];
      }else{
        return getComputedStyle(obj)[name];
      }
    }
    window.onload=function(){
      op=document.getElementById("p1");
      // alert(getStyle(op,"width"));
      alert(getStyle(op,"background"));
      // alert(getStyle(op,"backgroundColor"))
    }
  </script>
</head>
<body>
  <p id="p1" style="width:100px; height:100px; background:#f00;"></p>
</body>
</html>

ログイン後にコピー

実行結果:
jsはインターラインスタイルと現在のスタイルのコードを取得します
上記のコードの実行結果から、背景が返されることがわかります。これは #f00 ではなく、複合スタイルです。そのため、背景などの複合スタイルに遭遇した場合は、それを特別に処理する必要があります。ここでは、backgroundColor を使用できます。