jquery innerWidthメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery innerWidth()メソッド

innerWidthメソッドは、指定した要素の内側の横幅を取得するメソッドです
paddingは含みますが、borderの太さは含みません
取得する単位はpxです

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

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

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

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

jquery

$(function() {
	$("#foo,#foo2,#foo3").click(function(){
	var hoge = $(this).innerWidth();
	$(this).text("innerWidthの値は"+ 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 ホームページ作成無料