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

HTML DOM スタイルの overflow プロパティとは？使い方と設定値を解説

HTML ドキュメント内の要素に対して、overflow CSS プロパティの値を取得・変更するには、DOM のスタイルオブジェクトが持つ overflow プロパティを使用します。このプロパティを使うことで、JavaScript から動的に要素のはみ出しコンテンツの表示方法を制御できます。

構文（シンタックス）

overflow プロパティの基本的な構文は以下のとおりです。

overflow の値を取得する場合

object.style.overflow

overflow の値を変更する場合

object.style.overflow = "value"

設定できる値

overflow プロパティには、以下の値を指定できます。

値説明
visibleコンテンツをクリップせず、要素ボックスからはみ出して表示されます（初期値）。
hidden要素ボックスからはみ出した部分のコンテンツが非表示になります。
scrollコンテンツをクリップし、必要に応じてスクロールバーが表示されます。
autoコンテンツをクリップし、必要な場合にのみスクロールバーが追加されます。
initialこのプロパティの値をデフォルト値に戻します。
inherit親要素からこのプロパティの値を継承します。

サンプルコード

ここでは、style オブジェクトの overflow プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        margin: 1.5rem auto;
        height: 100px;
        overflow: scroll;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style overflow Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
    This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change overflow</button>
<script>
    function add() {
        document.querySelector('p').style.overflow = "hidden";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM スタイルの overflow プロパティとは？使い方と設定値を解説

初期状態では、段落要素に overflow: scroll; が適用されているため、高さ 100px のボックスからはみ出したテキストがスクロールバー付きで表示されます。

「Change overflow」ボタンをクリックすると、JavaScript の add() 関数が実行され、overflow CSS プロパティの値が scroll から hidden に変更されます。その結果、ボックスからはみ出したテキストは非表示になり、スクロールバーも消えます。

HTML DOM スタイルの overflow プロパティとは？使い方と設定値を解説

まとめ

DOM の style オブジェクトにある overflow プロパティを使えば、CSS を直接編集することなく、JavaScript だけで要素のコンテンツのはみ出し表示方法を動的に切り替えられます。スクロールバーの表示・非表示をユーザーの操作に応じて変えたい場合など、インタラクティブな UI を実装する際に非常に便利です。

  1. HTML DOM Style transformStyleプロパティの使い方を徹底解説

    HTML DOMのtransformStyleプロパティは、HTML文書内の要素に対して2Dまたは3D変換を取得・適用するために使用されます。特に、子要素の3D位置情報を保持するかどうかを制御したい場合に活用できる重要なスタイルプロパティです。構文transformStyleプロパティの基本的な構文は以下の通りです。値の取得object.style.transformStyle値の設定object.style.transformStyle = value設定できる値transformStyleプロパティには、以下の値を指定できます。値説明inherit親要素からこのプロパティの値を継承します。

  2. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる