outerWidth( [includeMargin] )

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>

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>

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>

スポンサード リンク

カテゴリー: API, CSS, DOM操作, JavaScript, jQuery, スタイルプロパティ, 寸法 タグ: パーマリンク