jquery widthメソッド

TOPページに戻る > jquery入門

jquery width()メソッド

widthメソッドは、指定した要素の幅を取得するメソッドです

幅の値を取得する

$("セレクタ").width();

指定したHTML要素のcssのwidthプロパティの値を取得します

指定した要素をクリックしたときに、クリックした要素の横幅を取得します

jquery

$(function() {
	$("#foo,#foo2,#foo3").click(function(){
	var hoge = $(this).width();
	$(this).text("widthの値は"+ hoge);
	});
});

css

div#hoge p {
 cursor: pointer;
 background-color: #F90;
}

p#foo{
 width: 200px ;
 }
p#foo2{
 width: 300px ;
 }
p#foo3{
 width: 500px ;
 }

html

<div id="hoge">
<p id="foo">p要素</p>
<p id="foo2">p要素</p>
<p id="foo3">p要素</p>
</div>

サンプル

横幅を指定する

widthメソッドの引数に数字を記述すると指定した要素の横幅を変更できます
指定した値はpxとしての数値になります

幅の値を取得する

$(セレクタ).width(数値)

指定した要素をクリックしたときに、クリックした要素の横幅を指定します

jquery

$(function() {
	$("#foo4,#foo5,#foo6").click(function(){
	$(this).width(200);
	});
});

css

div#hoge p {
 cursor: pointer;
 background-color: #F90;
}

html

<div id="hoge">
<p id="foo4">p要素</p>
<p id="foo5">p要素</p>
<p id="foo6">p要素</p>
</div>

サンプル