はじめに
jsで要素の横幅を取得したいのですが、どうしたらいいですか？
jsで要素の横幅を取得する際には、その要素に特定のclassまたはidを指定しておく必要があります。その要素をロード時や、画面のリサイズ時に指定すること横幅を取得します。
なるほど 指定することができなければ確かに横幅は取れないですね。今回は単一のものなのでidをふって取得したいです。
ではサンプルと合わせてご紹介したいと思います。
javascriptでwidthを取得しよう
javascriptを使って横幅を取得して見たいと思います。
サンプルとしては、targetと書かれているテキスト文字のdiv要素のwidthをロード寺とリサイズ寺に下に表示するサンプルを作成したいと思います。
サンプルコード
<div id="target">target</div>jQuery(window).on('load resize',function(){
setTimeout(function(){
var width=jQuery('#target').width();
jQuery('#target_result').text(width);
},"1000");
});
上記のように記述します。弊社のようなローディング画面があるサイトでは、ロード時に要素の横幅がうまく取得できないので、ディレイをかけることで、実装しています。使用方法に応じてこちらの設定は外していただいても結構です。
サンプルコードの実行例
target
上記のように現在の横幅が表示されるようになりました。
画面を小さくしたり大きくしたりすることで数字が変化します。
