jQueryオブジェクトが持つDOM要素の最初のDOM要素の高さを返す。margin、padding、borderは含まない。
サンプル
Javascript
var str = 'window : ' + $(window).height() + '<br />';
str += 'document : ' + $(document).height() + '<br />';
str += 'jqTest : ' + $('.jqTest').height() + '<br />';
str += 'No Element : ' + $('.NoElement').height();
$('.jqTest .screen').append(str);
$('.jqTest .targetBox').css({
padding: 20,
margin: 20,
border: '20px solid #990000',
background: '#CCCCCC'
}).click(function(){
alert('height:' + $(this).height());
});
HTML
<div class="jqTest">
<div class="screen"></div>
<hr />
<div class="targetBox">
ここの<br />
高さは?
</div>
</div>
.height( value )
引数
- val String, Number
- 単位付きの文字列もしくは数値
要素を指定の高さに設定する。
サンプル
Javascript
var num = '';
$('.jqTest2 li')
.css('border', '1px solid #000000')
.each(function(i){
$(this).mouseover(function(){
num = $(this).text();
$(this).height(num);
});
});
HTML
<div class="jqTest2">
<ul>
<li>50px</li>
<li>20em</li>
<li>200%</li>
</ul>
</div>
ん。%が動かない。
.height( function(index, height) )
引数
- (int)index
- jQueryオブジェクト内でのindex
- (int)height
- ターゲットの要素の高さ
heightの値となるものをreturnするとheightの値として設定してくれる。
サンプル
Javascript
var num = '';
$('.jqTest3 li').each(function(i){
$(this).css({
display: 'inline-block',
height: 80,
width: 80,
background: '#2AA198'
});
});
$('.jqTest3 .execute').toggle(function(){
$('.jqTest3 li').each(function(){
$(this).height(function(index, height){
return '+=' + parseInt($(this).text());
});
});
}, function(){
$('.jqTest3 li').each(function(){
$(this).height(function(index, height){
return '-=' + parseInt($(this).text()) / 2;
});
});
});
HTML
<div class="jqTest3">
<input type="button" value="execute" class="execute" />
<ul>
<li>50px</li>
<li>100px</li>
<li>150px</li>
</ul>
</div>