要素の幅・高さを取得・変更する [jQuery]

要素の幅・高さを取得・変更する

要素の各種サイズを取得する。

const $block = $('#block')

// content sizes
const contentWidth  = $block.width()
const contentHeight = $block.height()

// inner sizes (content + paddings)
const innerWidth  = $block.innerWidth()
const innerHeight = $block.innerHeight()

// outer sizes (content + paddings + borders)
const outerWidth  = $block.outerWidth()
const outerHeight = $block.outerHeight()

// outer sizes with margins (content + paddings + borders + margins)
const outerWidthWithMargin  = $block.outerWidth(true)
const outerHeightWithMargin = $block.outerHeight(true)

参考：

高さ、横幅取得方法 – Qiita

要素の高さ／幅を設定／取得するには？ (height／width／innerHeight／innerWidth／outerHeight／outerWidth) | Build Insider

要素の width、height を取得/設定する | コピペで使える JavaScript 逆引きリファレンス

width

.width() | jQuery API Documentation [Official]