w2utils.getSize

getSize(el, type)

要素のpadding、margin、borderを含んだサイズ または、絶対位置を返します。 戻り値はstringです。

el: HTML要素

対象の要素。

type: string

取得する項目。

説明

対象の要素は絶対配置にする必要はありませんが、 絶対位置を取得します。 第1引数のelは対象の要素を指定します。(jQueryオブジェクトです。) 第2引数のtypeは以下のパラメータを指定することができます。

• width - 要素の幅。
• height - 要素の高さ。
• +width - padding、margin、borderを含めた要素の幅。
• +height - padding、margin、borderを含めた要素の高さ。
• left - 要素の左座標。
• right - 要素の右座標。
• top - 要素の上座標。
• bottom - 要素の下座標。

以下のように指定することができます。

var a = w2utils.getSize(el, 'width');
console.log(a);

デモ

"デモ用文字列"の要素の幅、高さをconsole.logに出力します。

JavaScript

var width = w2utils.getSize($('#demo'), 'width');
var height = w2utils.getSize($('#demo'), 'height');
console.log('w:' + width + ' x h:' + height);

CSS

#demo {
  border: 1px solid #d50000;
}

HTML

<span id="demo">デモ用文字列</span>