• js

javascriptを使って要素の横幅を取得してみよう

はじめに

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


上記のように現在の横幅が表示されるようになりました。
画面を小さくしたり大きくしたりすることで数字が変化します。

関連記事

  1. javascriptを使って特定の要素に特定のクラスがあるかを調べよう…

  2. 特定のIDの複数のクラスをjsで取得しよう

  3. アコーディオンを作ってみよう

  4. javascript講座 – ログを出力する –…

  5. javascriptで四角形に斜め線を引こう

  6. javascriptでタブを自作しよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930