プロパティ offsetWidth

プロパティ offsetWidth は、要素の完全な 幅を含みます（要素自体の幅、 ボーダーの幅、内部のパディング、 スクロールバーを含みます）：

構文

javascript要素.offsetWidth;

例

要素の完全なサイズを調べてみましょう：

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  padding: 15px;
  border: 10px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

コードの実行結果：

javascript150

例

要素が非表示の場合、offsetWidth は 0 になります：

html<div id="elem"></div>

css#elem {
  display: none; /* 非表示の要素 */
  width: 100px;
  height: 100px;
  padding: 15px;
  border: 10px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

コードの実行結果：

javascript0

関連項目