デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.innerWidth( )ボーダーの内側の幅を取得

構文

ボーダーの内側の幅を取得返値:数値
jQo.innerWidth( )ver1.2.6〜

機能

jQueryオブジェクトで指定した要素のボーダーの内側の幅を数値で取得します。 widthメソッドと異なり値を設定することはできません。

左図のようにpaddingを含んだボーダーの内側の幅になります。



解説

ボーダーの内側の幅を取得

サンプル(innerWidth/01.html)を開いてbody内にdiv要素が1つあることを確認してください。div要素に対してはcssの設定で幅を50px、paddingに10pxを設定しています。

<div></div>
div{
	width:50px;
	height:50px;
	margin:10px;
	padding:10px;
	border:3px solid #333;
	background-color:#ddd;
}

jQueryは以下の様に記述され、buttonをクリックするとdiv要素のボーダーの内側の幅を取得し、アラートで表示します。

$("button").click(function(){
	var ans = $("div").innerWidth();
	alert(ans);
})

結果としてbuttonをクリックするとアラートで70と表示されます。
paddingの設定は10pxですが、左右にあるので20pxの加算となります(要素:50px+padding:20px=計70px)

関連項目

要素の幅(paddingは含まない)を取得したい場合はwidthメソッドを利用します。
borderの外側、またはmarginもを含んだ幅を取得したい場合はouterWidthメソッドを利用します。