HTML DOMのscrollWidthプロパティとは？構文と使い方を解説
scrollWidthプロパティとは
DOMのscrollWidthプロパティは、HTMLドキュメント内の要素の全体の幅（コンテンツ＋パディング）をピクセル単位で返します。要素の内容が横にはみ出している（スクロール可能な）場合でも、見えていない部分を含む実際のコンテンツ幅を取得できるのが特徴です。
構文
scrollWidthプロパティの基本構文は以下のとおりです。
element.scrollWidth
使用例
ここでは、段落要素（<p>）のscrollHeightとscrollWidthを取得し、ボタンをクリックするとその値を画面に表示するサンプルを紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
height:80px;
border:1px solid #fff;
overflow:auto;
width:250px;
margin:20px auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
}
</style>
</head>
<body>
<h1>DOM scrollHeight/scrollWidth Property Demo</h1>
<p>Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.</p>
<button onclick="getHW()" class="btn">Get paragraph height & width</button>
<div class="show"></div>
<script>
function getHW() {
var para = document.querySelector('p');
document.querySelector(".show").innerHTML="<div>Para Height = "+para.scrollHeight+" px</div><div>Para Width = "+ para.scrollWidth+" px</div>";
}
</script>
</body>
</html>実行結果
このコードをブラウザで開くと、次のように表示されます。
続いて、青色のボタン「Get paragraph height & width」をクリックしてください。段落要素のスクロール高さ（scrollHeight）とスクロール幅（scrollWidth）が画面に表示されます。
補足：clientWidthとの違い
似たプロパティにclientWidthがありますが、こちらはパディングを含む「表示領域のみ」の幅を返します。一方、scrollWidthはスクロールによって隠れている部分も含めた全体の幅を返すため、要素の内容があふれているかどうかの判定などに活用できます。
-
HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説
HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示
-
HTML DOM offsetWidthプロパティの使い方をわかりやすく解説
HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー