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