jquery heightメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery height()メソッド

heightメソッドは、指定した要素の高さを取得するメソッドです

高さの値を取得する

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

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

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

jquery

$(function() {
	$("#foo,#foo2,#foo3").click(function(){
	var hoge = $(this).height();
	$(this).text("heightの値は"+ hoge);
	});
});
css
div#hoge p {
 cursor: pointer;
 background-color: #F90;
}

p#foo{
 height: 50px ;
 }
p#foo2{
 height: 100px ;
 }
p#foo3{
 height: 200px ;
 }

html

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

サンプル

p要素

p要素

p要素

高さを指定する

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

幅の値を取得する

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

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

jquery

$(function() {
	$("#foo4,#foo5,#foo6").click(function(){
	$(this).height(50);
	});
});
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>

サンプル

p要素

p要素

p要素







(C)2012 ホームページ作成無料