innerWidth とは
- ここで説明するinnerWidth とは次の語句からなる jQuery のメソッドです。
- inner
- 読み: インナー
意味: 内、内部 - width
- 読み: ウィズ
意味: 幅
innerWidth メソッドの概要
このメソッドは要素のパディング領域とコンテンツボックスを含む横幅を操作することができます。
反対の言い方をすると、要素が持つマージン領域とボーダー領域を除いたものの横幅を操作できるということです。
構文
サンプルを見る前に構文を確認しておきます。
var innerWidth = $(Selector).innerWidth();
$(Selector).innerWidth(value);
$(Selector).innerWidth(function);
- メソッドの引数を空にすることで横幅を取得します。
- メソッドの引数に数値、または文字数字を与えることで横幅を設定します。
- メソッドの引数に関数の戻り値を利用することもできます。
サンプルコードと実行結果
このサンプルでは div 要素を使用しています。 対象となる div 要素には idChild の識別子を設定しています。
idChild には、あらかじめ CSS で要素のコンテンツボックスの横幅を 200px 、パディングを 20px に設定しておき、 innerWidth() で値を取得してみました。確認のために比較する値が必要でしたので width() メソッドも使用して要素のコンテンツボックスの横幅も取得しています。
サンプルコード: CSS
<style>
#idParent{
border: thin dashed currentColor;
margin: 0;
padding: 0;
width: max-content;
}
#idChild{
border: 5px solid ##red;
background-color: ##khaki;
background-clip: content-box;
box-sizing: content-box;
margin: 20px;
padding: 20px;
width: 200px;
height: 200px;
}
</style>
- 14: padding (要素の内側の余白: 20px)
- 15: width (要素の横幅: 200px)
サンプルコード: HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="idParent">
<div id="idChild"></div>
</div>
<output id="idWidth">innerText</output><br>
<output id="idInnerWidth">innerText</output>
</body>
- 05: div要素 (親要素です。このサンプルでは特別な意味を持ちません。)
- 06: div要素 (子要素です。この要素の横幅を取得します。)
- 08: output要素 (jQueryでwidthの値を出力します。)
- 09: output要素 (jQueryでinnerWidthの値を出力します。)
サンプルコード: script
<script>
$(document).ready(function(){
$("#idWidth").text("width="+$("#idChild").width());
$("#idInnerWidth").text("innerWidth="+$("#idChild").innerWidth());
},false);
</script>
- 02: Docment.ready (DOMの読込みが完了した時点で関数を呼びます。)
- 03: 関数の内容 (width()メソッドの結果をidWidthに出力します。)
- 04: 関数の内容 (innerWidth()メソッドの結果をidInnerWidthに出力します。)
実行結果:
領域見本:
margin
padding
content-box
結果は要素のコンテンツボックスの横幅をCSSの box-sizing プロパティが初期値の状態のままで、 width プロパティを200pxに設定しているので、jQueryの width() メソッドで横幅を取得すれば200という値が返ってきています。 また、CSSで padding を20pxに設定しているので、コンテンツボックスの左右には20pxずつの余白が生成されています。 これをinnerWidth()で取得するとコンテンツボックスの横幅とパディングの左右の幅を足した240という値が返ってきています。