jQuery API の outerWidth( [includeMargin] ) は、最初にマッチした要素の、paddingとborderを含む幅を、取得するメソッド。引数[includeMargin]にtrueを設定すると、paddingとborderとmarginを含む幅を、取得する。
引数
- [includeMargin]
marginを含めるか含めないかを決める、booleanType（論理型）オプション。
trueを設定すると、paddingとborderとmarginを含む幅を、取得する。
falseを設定すると、paddingとborderを含む幅を、取得する。
戻り値
- Integer
整数値。
記述方法
outerWidth()
jQuery( セレクター ) . outerWidth();
「セレクター」に最初にマッチした要素の、paddingとborderを含む幅を、取得する。
outerWidth( true )
jQuery( セレクター ) . outerWidth( true );
「セレクター」に最初にマッチした要素の、paddingとborderとmarginを含む幅を、取得する。
記述例
jQuery( '.jquery-sample' ) . outerWidth();
クラス名が「jquery-sample」である要素のうち、最初にマッチした要素の、paddingとborderを含む幅を取得する。
jQuery( '.jquery-sample' ) . outerWidth( true );
クラス名が「jquery-sample」である要素のうち、最初にマッチした要素の、paddingとborderとmarginを含む幅を取得する。
実装例（サンプル）
幅：
実装例（サンプル）の動作について
- 「width()」ボタンをクリックすると、幅を取得し、「幅：」の右側に、「25px [ width() ]」と表示する。
- 「innerWidth()」ボタンをクリックすると、paddingを含む幅を取得し、「幅：」の右側に、「75px [ innerWidth() ]」と表示する。
- 「outerWidth()」ボタンをクリックすると、paddingとborderを含む幅を取得し、「幅：」の右側に、「125px [ outerWidth() ]」と表示する。
- 「outerWidth( true )」ボタンをクリックすると、paddingとborderとmarginを含む幅を取得し、「幅：」の右側に、「175px [ outerWidth( true ) ]」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-width' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . width();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ width() ]' );
} );
jQuery( '#jquery-sample-button-innerWidth' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . innerWidth();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ innerWidth() ]' );
} );
jQuery( '#jquery-sample-button-outerWidth' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerWidth();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerWidth() ]' );
} );
jQuery( '#jquery-sample-button-outerWidth-true' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerWidth( true );
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerWidth( true ) ]' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-width' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . width();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ width() ]' );
} );
jQuery( '#jquery-sample-button-innerWidth' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . innerWidth();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ innerWidth() ]' );
} );
jQuery( '#jquery-sample-button-outerWidth' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerWidth();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerWidth() ]' );
} );
jQuery( '#jquery-sample-button-outerWidth-true' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerWidth( true );
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerWidth( true ) ]' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 430px;
height: 250px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-div {
width: 25px;
height: 25px;
margin: 25px;
padding: 25px;
background-color: blue;
border: 25px solid red;
}
-->
</style>
<!--
#jquery-sample {
width: 430px;
height: 250px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-div {
width: 25px;
height: 25px;
margin: 25px;
padding: 25px;
background-color: blue;
border: 25px solid red;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
幅：<span id="jquery-sample-message"></span>
</p>
<p>
<button id="jquery-sample-button-width">width()</button>
<button id="jquery-sample-button-innerWidth">innerWidth()</button>
<button id="jquery-sample-button-outerWidth">outerWidth()</button>
<button id="jquery-sample-button-outerWidth-true">outerWidth( true )</button>
</p>
<div id="jquery-sample-div"></div>
</div>
<p>
幅：<span id="jquery-sample-message"></span>
</p>
<p>
<button id="jquery-sample-button-width">width()</button>
<button id="jquery-sample-button-innerWidth">innerWidth()</button>
<button id="jquery-sample-button-outerWidth">outerWidth()</button>
<button id="jquery-sample-button-outerWidth-true">outerWidth( true )</button>
</p>
<div id="jquery-sample-div"></div>
</div>