ywork2020.com

Title

要素の横幅を操作する

目次 (INDEX)

width とは

ここで説明する width とは次の語句からなる jQuery のメソッドです。
width
読み: ウィズ
意味: 幅

目次に戻る

width メソッドの概要

このメソッドは、呼び出し元のコンテンツボックスの横幅を取得、または設定することができます。

これは、CSS の width プロパティでも操作できますが、 プログラムから動的に変更の必要がある場合は このメソッドを利用するか、 prop メソッドを使って width プロパティを操作する方法があります。 また、CSS の疑似クラスを利用する方法も考えられます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var elementWidth = $(Selector).width();
$(Selector).width(value);
$(Selector).width(function);
  • メソッドの引数を空にすることで横幅を取得します。
  • メソッドの引数に数値、または文字数字を与えることで横幅を設定します。
  • メソッドの引数に関数の戻り値を利用することもできます。

目次に戻る

サンプルコードと実行結果 (ブラウザのウィンドウの横幅を取得する)

このサンプルでは window 変数をセレクターに指定してブラウザのウィンドウの横幅を取得していますが、 要素名 や id などで要素を特定すれば、要素の横幅も取得することができます。

サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput1"> </output> px
	<script>...</script>
</body>
  • 06: output id="idOutput1" (結果を出力するための要素です。)
サンプルコード: script
<script>
	$("#idOutput1").text( $(window).width() );
	$(window).on("resize", function(){
		$("#idOutput1").text( $(window).width() );
	});
</script>
  • 02, 04: $("#idOutput1").text( $(window).width() ) (idOutput1 のコンテンツにブラウザのウィンドウの横幅を出力します。)
  • 03-05: $(window).on("resize", function(){ 処理 } (window のサイズが変更されたら { 処理 } の部分のコードが実行されます。)
実行結果:
px

PC から閲覧されている場合はブラウザのウィンドウの横幅を変更することで値の変化も確認できます。

目次に戻る

サンプルコードと実行結果 (要素の横幅を設定する)

ここでは、要素の横幅を設定しています。

input 要素の range 型のスライダーと連動して要素の横幅が変更されるサンプルです。

サンプルコード: CSS
<style>
	#idDiv{
		background-color: ##darkseagreen;
		margin: 0;
		padding: 0;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<input id="idRange" type="range" value="50" min="0" max="100">
	<output id="idOutput2">50%</output>
	<div id="idDiv"></div>
	<script>...</script>
</body>
  • 08: div id="idDiv" (この要素の横幅を設定します。)
サンプルコード: script
<script>
	$("#idDiv").width( $("#idRange").val() + "%" );
	$("#idRange").on("change", function(){
		$("#idDiv").width( $("#idRange").val() + "%" );
		$("#idOutput2").text( $("#idRange").val() + "%" );
	});
</script>
  • 02, 04: $("#idDiv").width( $("#idRange").val() + "%" ); (要素の横幅を設定しているコードです。)
実行結果:
50%
sample

目次に戻る