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

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

HTML DOM の overflowX プロパティは、HTMLドキュメント内で要素ボックスから内容が左右方向にはみ出した場合の表示方法を取得・設定するために使用します。

構文（Syntax）

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

値の取得

object.style.overflowX

値の設定

object.style.overflowX = "value"

設定できる値（Values）

value には以下のいずれかの値を指定できます。

値説明
scroll内容をクリップし、必要に応じてスクロールバーを常に表示します。
auto内容をクリップし、必要な場合のみスクロールバーを自動的に追加します。
hidden要素ボックスの外にはみ出した内容を非表示にします。
visible内容をクリップせず、要素ボックスの外にはみ出したまま表示します。
initialこのプロパティの値をデフォルト値に戻します。
inherit親要素からこのプロパティの値を継承します。

サンプルコード（Example）

それでは、style の overflowX プロパティを使った具体的な例を見てみましょう。以下の例では、ボタンをクリックすると段落の overflowX の値が変更されます。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        height:100px;
        width:200px;
        white-space: nowrap;
    }
    .btn {
        background: coral;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style overflowX Property Example</h1>
<p>
    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.overflowX = "scroll";
    }
</script>
</body>
</html>

実行結果（Output）

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

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

ここで「Change overflow」ボタンをクリックすると、JavaScript の add() 関数が呼び出され、overflowX CSS プロパティの値が初期状態（visible）から scroll に変更されます。その結果、段落の幅を超えてはみ出していたテキストが横方向のスクロールバー付きで表示されるようになります。

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

このように overflowX プロパティを使えば、要素の横方向のはみ出し制御を JavaScript から動的に切り替えることができます。レスポンシブデザインや UI の調整において非常に便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri

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

    DOM スタイルの textTransform プロパティは、HTML ドキュメント内の要素のテキストに対して、大文字・小文字への変換を取得（参照）および適用するために使用されます。JavaScript から動的にテキストの表示形式を変更したい場合に便利なプロパティです。 構文 textTransform プロパティの基本的な構文は以下のとおりです。 値の取得（Returning textTransform） object.style.textTransform 値の設定（Modifying textTransform） object.style.textTransform = value;