JavaScriptで要素の背景色を変更する方法/style.backgroundColorの使い方

JavaScriptを経由して要素（divやbody等）の背景色を変更する方法のご紹介です。html、css、JavaScript全て使用します。

完成品

次のようなものを作ります。

背景色を変更する方法

まずはdivをhtmlで作り、適当な要素をcssで入れて四角形を作っておきます。

<！--html-->
<div class="hako" id ="box"></div>
<input type="button" value="実行" onclick="hakoClick();"/>

/*css*/
.hako{
border: solid 1px black;
width:100px;
height:50px;
background-color:white;
}

この箱に対して、ボタンを押した時に次のような命令が呼び出されるようにしておきます。

//JavaScript
function hakoClick() {
irobako = document.getElementById("box");
irobako.style.backgroundColor = "black";
}

htmlで要素にidを付けておき、このidをJavaScriptで読み取って、style.backgroundColorを変更することで背景色を変更しています。これを実行することで上の背景の変化が実装できます。
idを変更しないでも、たとえばbodyの背景をまるごと変更するのであれば、次のような命令で実装することができます。

//JavaScript
function hakoClick2() {
document.body.style.backgroundColor = "black";
}

スマホだとわかりづらいですが、document.bodyでhtmlのbody要素をまるごと読み込み、背景色を変更しています。bodyをpやh2などに変更することもできます。
本文の背景は、たぶんwpやブログサービスならIDかclassで”main”を取得すれば可能だと思います。違ったらHTMLを検証するか、本文をDivで全て囲んでしまうのもひとつの方法かと思います。

JavaScriptの使い方・メソッド・プロパティまとめ

HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

sunagitsune.com

2019.02.23