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

【初心者向け】HTML DOM style.width プロパティで要素の幅を取得・変更する方法

HTML DOM の style.width プロパティとは?

HTML DOM の style.width プロパティは、HTML ドキュメント内の要素に適用された CSS の width(幅)プロパティを取得(参照)および変更するために使われます。JavaScript から要素の幅を動的に制御したい場面で非常に役立つプロパティです。

構文

style.width プロパティの基本構文は以下の通りです。

幅の値を取得する

object.style.width

幅の値を変更する

object.style.width = "value"

value には「200px」「50%」など、CSS で有効な幅の値を文字列として指定します。

サンプルコード

それでは、style.width プロパティを使った具体的な例を見てみましょう。以下の例では、ボタンをクリックすると最初の段落要素の幅が「50%」に変更されます。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        margin: 1.5rem auto;
    }
    .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 width プロパティの例</h1>
<p>
    これはダミーテキストを含む段落1です。
    これはダミーテキストを含む段落1です。
    これはダミーテキストを含む段落1です。
</p>
<button onclick="add()" class="btn">幅を変更</button>
<script>
    function add() {
        document.querySelector('p').style.width = "50%";
    }
</script>
</body>
</html>

実行結果

このコードをブラウザで実行すると、次のような画面が表示されます。

【初心者向け】HTML DOM style.width プロパティで要素の幅を取得・変更する方法

続いて、「幅を変更」ボタンをクリックしてみましょう。クリックすると、段落要素の幅が画面の 50% に変化します。

【初心者向け】HTML DOM style.width プロパティで要素の幅を取得・変更する方法

知っておきたいポイント

  • インラインスタイルのみ取得可能: style.width プロパティは、要素の style 属性(インラインスタイル)に設定された値のみを返します。外部 CSS ファイルや <style> タグ内で定義した幅は取得できないため注意が必要です。
  • 実際の描画幅を取得したい場合: getComputedStyle() メソッドや offsetWidth プロパティを使えば、ブラウザが計算した実際の表示幅を取得できます。
  • 単位の指定を忘れずに: 値を代入する際は「px」「%」などの有効な CSS 単位を付けた文字列にする必要があります。「50」のように単位なしで指定しても正しく反映されません。

まとめ

HTML DOM の style.width プロパティを使えば、JavaScript だけで要素の幅を取得・変更できます。ボタンのクリックイベントと組み合わせることで、ユーザーの操作に応じてレイアウトを動的に変化させるインタラクティブな Web ページを作成できます。ぜひ実際にコードを書いて挙動を確かめてみてください。

  1. HTML DOM の boxSizing プロパティとは？使い方と設定値を解説

    HTML DOM の boxSizing プロパティは、要素全体の幅と高さをどのように計算するかを指定するために使用されます。値として「border-box」または「content-box」を指定できます。このプロパティを理解することで、padding（パディング）や border（ボーダー）を含めたレイアウトの計算方法を自由にコントロールできるようになり、レスポンシブデザインなどでも非常に役立ちます。 構文 boxSizing プロパティを設定する構文は以下のとおりです。 object.style.boxSizing = content-box|border-box|initial|inhe

  2. HTML DOM の borderWidth プロパティの使い方を解説

    HTML DOM の borderWidth プロパティとはHTML DOM の borderWidth プロパティは、要素の境界線（ボーダー）の幅を取得・設定するためのショートハンド（省略記法）です。値は 1 つから 4 つまで指定でき、指定した値の数に応じて以下のように解釈されます。値を 4 つ指定した場合：上・右・下・左の順（時計回り）に境界線の幅が適用されます。値を 1 つだけ指定した場合：4 つの境界線すべてに同じ幅が適用されます。値を 2 つ指定した場合：上下に 1 つ目の値、左右に 2 つ目の値が適用されます。構文borderWidth プロパティを設定する際の構文は以下のとおり