JavaScript　styleプロパティを操作して要素の見た目を変える方法

JavaScriptのstyleプロパティを使って要素のスタイルを変更する方法を解説します。

JavaScriptで要素のスタイルを変更する方法を教えてください。

styleプロパティを使うことで、要素のスタイルを変更することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

styleプロパティとは

　styleプロパティは、JavaScriptを使ってHTML要素のスタイル（見た目）を変更するためのプロパティです。このプロパティを使うことで、CSSプロパティと同じように要素のスタイルを変更することができます。

styleプロパティは、HTML要素オブジェクトのプロパティとして定義されており、以下のように記述します。

たとえば、要素の背景色を変更する場合は以下のように書きます。

element.style.backgroundColor = 'red';

　また、styleプロパティには、複数のプロパティを一度に指定することもできます。以下のように、CSSのように「;」で区切ってプロパティを列挙します。

element.style.cssText = 'background-color: blue; color: white; font-size: 20px;';

このようにstyleプロパティを使うことで、HTML要素のスタイルをダイナミックに変更することができます。

styleプロパティの使い方：サンプルプログラムを使った解説

以下は、styleプロパティでスタイルを変更するサンプルプログラムです。

// HTML要素を取得
const element = document.getElementById('example');

// 背景色を変更する
element.style.backgroundColor = 'red';

// フォントサイズを変更する
element.style.fontSize = '16px';

// 複数のプロパティを一度に指定する
element.style.cssText = 'background-color: blue; color: white; font-size: 20px;';

　上記のプログラムでは、まず getElementById() メソッドを使って、idが”example”であるHTML要素を取得しています。次に、 style プロパティを使って、要素のスタイルを変更しています。これにより、要素の背景色が赤色に、フォントサイズが16ピクセルに変更されます。

　また、 style プロパティに複数のプロパティを一度に指定するには、 cssText プロパティを使用します。以下のように、 cssText プロパティにセミコロンで区切った複数のスタイルプロパティを指定することができます。これにより、要素の背景色が青色、文字色が白色、フォントサイズが20ピクセルに変更されます。

このように、JavaScriptの style プロパティを使って、HTML要素のスタイルを簡単に変更することができます。

styleプロパティを初期化する方法

styleプロパティにnullを設定することで初期化することができます。

element.style.property = null;

setAttributeメソッドでのstyle変更は非推奨

　HTML要素のスタイルを変更する際、setAttributeメソッドを使ってstyle属性を直接変更する方法がありますが、この方法は非推奨です。

　これは、setAttributeメソッドでstyle属性を直接変更すると、既に設定されているスタイルに上書きしてしまうため、要素に設定されたスタイルが完全に失われてしまう可能性があるからです。

たとえば、以下のように要素の背景色を赤色に設定する場合を考えます。

document.getElementById('myDiv').setAttribute('style', 'background-color: red;');

　このようにsetAttributeメソッドでstyle属性を直接変更すると、要素に設定されたスタイルが完全に失われてしまいます。また、要素に既に設定されているスタイルの中で、background-colorプロパティだけが上書きされ、他のスタイルは維持されない可能性があるため、要素のスタイルが予期しない形で変更されることがあります。

　そのため、要素のスタイルを変更する場合は、setAttributeメソッドではなく、styleプロパティを直接変更することを推奨します。styleプロパティを使うことで、要素に設定されているスタイルを保持したまま、スタイルの一部を変更することができます。

document.getElementById('myDiv').style.backgroundColor = 'red';

　このように、styleプロパティを使うことで、要素に設定されているスタイルを保持しつつ、スタイルを変更することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

styleプロパティを使って要素のスタイルを変更する方法を解説しました。

JavaScriptで要素の見た目を変更することができました！

JavaScriptのstyleプロパティを使うことで、要素の見た目をダイナミックに変更することができます。ただし、過剰なスタイルの変更はSEOに悪影響を与えることがあるため、注意が必要です。