技術コンテンツ

JavaScript / DOM

No.7 要素ノードのスタイル

【JavaScript / DOM】要素ノードのスタイル - ブラウザ上の見た目をプログラムから変更する

JavaScript/DOMのスタイルについて解説します。

検証環境

JavaScript -

macOS

14.1

要素ノードのスタイル

要素ノードはスタイルを表すstyleプロパティを持ちます。

このプロパティを使用して、スタイルの取得や設定が可能です。

スタイル一覧

スタイル一覧はstyleプロパティに格納されます。

基本構文

要素ノード.style

サンプル

sample.js

<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    ___ih_hl_start
    console.log(node.style);
    ___ih_hl_end
    
    for( let p of node.style ) {
        console.log(p);
    }
</script>

プレビュー

Console

CSSStyleDeclaration {0: 'color', 1: 'font-size', …}
color
font-size

styleプロパティはインラインスタイル（style属性値）のみ格納します。

そのため、style要素や外部スタイルシートの適用スタイルプロパティは含まれません。

全てのスタイルプロパティを取得するgetComputedStyleメソッドは後述で解説します。

各スタイルの取得

各スタイルはstyleプロパティ経由で取得します。

基本構文

要素ノード.style["スタイルプロパティ名"]
//または
要素ノード.style.スタイルプロパティ名

サンプル

sample.js

<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    ___ih_hl_start
    console.log(node.style['font-size']);
    console.log(node.style.color);
    ___ih_hl_end
</script>

プレビュー

Console

2.5rem
red

６行目はブランケット記法、７行目はドット記法でアクセスしています。

どちらでもスタイルプロパティ値を取得できますが、font-sizeのようにハイフン（-）などのプロパティ名に使用不可な文字を含む場合はブランケット記法で記述します。

各スタイルの設定

各スタイルはstyleプロパティ経由で設定します。

基本構文

要素ノード.style["スタイルプロパティ名"] = 値
//または
要素ノード.style.スタイルプロパティ名 = 値

サンプル

sample.js

<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    ___ih_hl_start
    node.style['font-size'] = "1.0rem";
    node.style.color = "blue";
    ___ih_hl_end
    
    console.log(node.style['font-size']);
    console.log(node.style.color);
</script>

プレビュー

Console

1rem
blue

各スタイルの取得と同様にプロパティ名に使用不可な文字を含む場合はブランケット記法で記述します。

各スタイルの初期化

各スタイルの初期化はスタイルプロパティの値をnullに設定します。

sample.js

<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    ___ih_hl_start
    node.style['font-size'] = null;
    node.style.color = null;
    ___ih_hl_end
    
    console.log(node.style['font-size']);
    console.log(node.style.color);
</script>

プレビュー

Console

全スタイルプロパティ

上記で説明した通り、styelプロパティはインラインスタイルのみの値です。

そのため、style要素や外部スタイルシートで適用したスタイルプロパティは含みません。

sample.js

<style>
    h1 {
        color: red;
    }
</style>

<h1 id="title" style="font-size: 2.5rem;">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    console.log(node.style);
    
    console.log(node.style.color);
</script>

プレビュー

Console

CSSStyleDeclaration {0: 'font-size', …}

このコードではstyle要素でh1要素のカラーをredに設定していますが、実行結果からstyleプロパティに含まれないことが分かります。

style要素や外部スタイルシート等の全てのスタイルを取得するには、windowオブジェクトのgetComputedStyleメソッドを使用します。

sample.js

<style>
    h1 {
        color: red;
    }
</style>

<h1 id="title" style="font-size: 2.5rem;">JavaScriptとは</h1>

<script type="text/javascript">
    let node = document.getElementById("title");
    
    let style = window.getComputedStyle(node);
    
    console.log(style);
    
    console.log(style.color);
</script>

プレビュー

Console

CSSStyleDeclaration {0: 'accent-color', 1: 'align-content', 2: 'align-items' …}
rgb(255, 0, 0)

colorの値を関数表記で取得できました。

なお、windowオブジェクトはウィンドウ（タブ）を表わすオブジェクトです。

ブラウザ実行のJavaScriptで自動で生成され、画面上に表示するオブジェクトの最上位オブジェクトになります。