jquery outerWidthメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery outerWidth()メソッド

outerWidthメソッドは、指定した要素の外側の横幅を取得するメソッドです
borderの太さを含みます、paddingも含みます
引数に何も指定しないとmarginを含まない要素の横幅を取得します
引数にtrueを指定するとmarginも含めた横幅を取得できます
取得する単位はpxです

枠線を含めた外側の横幅の値を取得する

$("セレクタ").outerWidth()

枠線とmarginを含めた外側の横幅の値を取得する

$("セレクタ").outerWidth(true)

指定したHTML要素の内側の横幅の値を取得します

指定した要素をクリックしたときに、クリックした要素の枠線を含む外側の横幅を取得します

jquery

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

p#foo{
  width: 200px;
  padding-left: 5px;
 }
p#foo2{
  width: 200px;
  border: 3px solid;
 }
p#foo3{
  width: 200px;
  border: 3px solid;
  padding-left: 5px;
  margin-left: 5px;
 }

html

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

サンプル

width: 200px; padding-left: 5px;

p要素

width: 200px;
border: 3px solid;

p要素

width: 200px;
border: 3px solid;
padding-left: 5px;
margin-left: 5px;

p要素







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