17256


**前提**  
・レスポンシブサイト

[code]

    <div class="hoge">
    
[/code]

・hogeクラスは複数存在するが、全て同じサイズの動き(画面幅に応じた適切な幅で表示)

* * *

**知りたいこと**  
・リサイズする度ごとに、画面上の「div hogeクラス」サイズを取得したい  
※Chromeコンソール画面で、指定div要素にマウスオーバーした際に表示されるサイズ(オリジナルではなく画面上の表示サイズ)を取得したい

* * *

**最終的にやりたいこと**  
・「div hogeクラス」の画面上の横幅を基準として、このdiv内で読み込む画像パスを条件分岐したい


CC BY-SA 3.0
2015-08-05T11:45:58.423
13073
2015-10-05T02:25:59.993
7886
question
javascript css dom
リサイズした際、指定クラス名の(画面上の)横幅サイズを取得したい


jQueryを使用しているという前提でよければ・・・

[code]

    $(window).on('resize', function(e) {
        console.debug($('.hoge').first().outerWidth());
    });
    
[/code]


CC BY-SA 3.0
2015-08-05T14:12:11.070
13081
2015-08-05T14:12:11.070
9608
13073
answer


jQueryを使用しない場合、以下のコードでwidthを取得できます。

[code]

    <div class="hoge">hoge</div>
    <script>
    (function(){
      var onResize= function(){
        var element= document.querySelector('.hoge');
        var boundingClientRect= element.getBoundingClientRect();
    
        if(boundingClientRect.width>500){
          console.log('over 500',boundingClientRect.width);
        }
        else{
          console.log('500 or less',boundingClientRect.width);
        }
      }
    
      addEventListener('DOMContentLoaded',onResize);
      addEventListener('resize',onResize);
    })();
    </script>
[/code]

以下の点に注意してください。

  * marin, padding, [box-sizing](http://kouto-swiss.io/docs.html#box-sizing-reset)などのスタイルを定義している要素の場合、意図したwidthを取得出来ない場合があります。[window.getComputedStyle](https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle)の使用を検討してください。
  * 対象の要素が動的に追加／削除／変更される場合、jQueryの[$(document).on()](http://qiita.com/sasaplus1/items/0ec036c1a8789b9d9907#2-3)などで、DOMの変更を監視する必要があります。


CC BY-SA 3.0
2015-10-05T02:25:59.993
17256
2015-10-05T02:25:59.993
9834
13073
answer