HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

HTML DOM offsetWidthプロパティとは

HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。

構文

HTMLElement.offsetWidth

要素が非表示(display: none など)の状態にある場合は、0 が返されます。

関連プロパティとの違い

  • offsetWidth: パディング+ボーダー+スクロールバーを含んだ幅
  • clientWidth: パディングは含むが、ボーダーとスクロールバーは含まない幅
  • scrollWidth: あふれて見えていないコンテンツ部分も含めた内容全体の幅

サンプルコード

次の例では、画像とそのコンテナ要素の offsetWidth をボタン操作で取得し、画面に表示します。「スクロールバーを削除」ボタンでは、コンテナのサイズを画像に合わせて overflow を hidden に変更したうえで、再度幅を取得して表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetWidth</title>
<style>
    form {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin: 5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #containerDiv {
        margin: 0 auto;
        height: 100px;
        width: 100px;
        overflow: auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-offsetWidth</legend>
            <div id="containerDiv">
                <img id="image" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
            </div>
            <input type="button" onclick="getWidth()" value="画像の幅を取得">
            <input type="button" onclick="fitWidth()" value="スクロールバーを削除">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var divDisplay = document.getElementById("divDisplay");
        var imgSelect = document.getElementById("image");
        var containerDiv = document.getElementById("containerDiv");
        function getWidth() {
            divDisplay.innerHTML = '画像の幅(パディング・ボーダー込み): ' + imgSelect.offsetWidth;
            divDisplay.innerHTML += '<br>コンテナの幅(パディング・ボーダー込み): ' + containerDiv.offsetWidth;
        }
        function fitWidth() {
            containerDiv.style.height = imgSelect.height + 'px';
            containerDiv.style.width = imgSelect.width + 'px';
            containerDiv.style.overflow = 'hidden';
            getWidth();
        }
    </script>
</body>
</html>

実行結果

いずれのボタンもクリックしていない状態 −

HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

「画像の幅を取得」ボタンをクリックした後 −

HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

「スクロールバーを削除」ボタンをクリックした後 −

HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

  1. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使