ホームページ > 記事 > ウェブフロントエンド > jsのstyle.widthとoffsetWidthの違いを詳しく解説

jsのstyle.widthとoffsetWidthの違いを詳しく解説

小云云オリジナル: 2017-12-22 10:10:332293ブラウズ

初心者として、この記事では、特定の要素の幅（高さ、上部の値など）を取得するときに、style.width を使用するか、offsetWidth を使用するかについてよく疑問に遭遇します。 jsにおけるstyle.widthとoffsetWidthの違い（詳細解説）を踏まえた記事をお届けします。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。皆さんが js の style.width と offsetWidth の違いをよりよく理解できることを願っています。

1. 5b127429c4ebf04538724d6c7714739c など、スタイルがインラインで記述されている場合、style.width または offsetWidth を使用して要素の幅を取得できます。

ただし、#box{ width: 100px; } のようにスタイルがスタイルシートに記述されている場合、offsetWidth は要素の幅を取得するためにのみ使用でき、style.width によって返される値は空になります。

2. style.width 取得される要素の幅は、borderとpaddingによって占められる幅を除いたpの幅のみであり、幅の値はpxです。

offsetWidth 取得する要素の幅はwidth+border+paddingの値(marginは除く)となり、戻り値は単位の無い数値のみとなります。

次の例に示すように:

<head>
    <script>
      window.onload = function(){
        var box = document.getElementById(&#39;box&#39;);
        console.log(box.style.width); 
        console.log(box.offsetWidth); 
       }
</script>
  </head>
  <body>
    <p id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></p>
  </body>

コンソールによる最初の結果出力: 300px

コンソールによる 2 番目の結果出力: 308 注: 300+ 3x2 +1x2 = 308 、単位なし

3. style.widthはjsの要素の幅を設定するために使用することもできますが、offsetWidthは使用できません。

次の例に示すように:

<script>
      window.onload = function(){
        var box = document.getElementById(&#39;box&#39;);
        box.style.width = &#39;200px&#39;;
        console.log(box.offsetWidth);
        console.log(box.style.width);
        box.offsetWidth = &#39;400px&#39;;
        console.log(box.offsetWidth);
        console.log(box.style.width);
      }
    </script>
  </head>
  <body>
    <p id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></p>
  </body>

コンソールの出力結果は 208 200px 208 200px

つまり、style.width による幅の設定は成功しますが、offsetWidth による幅の設定は失敗します。

jsのstyle.widthとoffsetWidthの違いを詳しく解説

関連記事