要素にスタイルを追加する方法

概要: このチュートリアルでは、JavaScript DOMメソッドを使用して要素にスタイルを追加する方法を学びます。

次のような<div>要素があるとします。

<div class="note">JavaScript CSS</div>Code language: HTML, XML (xml)

そして、この要素にスタイルを追加したいとします。 JavaScript DOMメソッドを使用すると、要素にインラインスタイルまたはグローバルスタイルを追加できます。

インラインスタイル

要素にインラインスタイルを追加するには、次の手順に従います。

• まず、document.querySelector()などのDOMメソッドを使用して要素を選択します。選択した要素には、要素にさまざまなスタイルを設定できるstyleプロパティがあります。
• 次に、styleオブジェクトのプロパティの値を設定します。

次のコードは、上記の<div>要素の背景色と色を変更します。

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';Code language: JavaScript (javascript)

1) cssTextプロパティの使用

個々のスタイルを追加するのは非常に冗長です。幸いなことに、cssTextプロパティを使用すると、複数のスタイルを一度に設定できます。

note.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)

この例では、+=演算子を使用して、既存のスタイルに新しいスタイルを追加しました。 =演算子を使用すると、既存のスタイルは次のように削除されます。

note.style.cssText = 'color:red;background-color:yellow';Code language: JavaScript (javascript)

2) ヘルパー関数の使用

次のヘルパー関数は、要素とスタイルオブジェクトを受け入れます。 styleオブジェクトからすべてのスタイルをelementのstyleプロパティに追加します。

function css(element, style) {
    for (const property in style)
        element.style[property] = style[property];
}Code language: JavaScript (javascript)

そして、このcss()ヘルパー関数を使用して、<div>要素のスタイルを次のように設定できます。

const note = document.querySelector('.note');
css(note, {
    'background-color': 'yellow',
    color: 'red'
});Code language: JavaScript (javascript)

グローバルスタイル

要素にグローバルスタイルを追加するには、スタイル要素を作成し、CSSルールを入力して、スタイル要素をDOMツリーに追加します。次のようにします。

const style = document.createElement('style');
style.innerHTML = `
      .note {
        background-color: yellow;
        color:red;
      }
    `;
document.head.appendChild(style);Code language: JavaScript (javascript)