javascript 背景色を変更して切り替える

2020.09.16
javascript
javascript

javascriptで、style.backgroundColorとフラグを使って、背景色を変更して切り替えるサンプルコードを記述してます。

1. 環境
2. style.backgroundColor使い方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

style.backgroundColor使い方

style.backgroundColorを使うと、html要素の背景色を変更することが可能です。

// 対象の要素を取得
let obj = document.getElementById("sample");

// 白に変更する場合は、以下の3パターン存在します
obj.style.backgroundColor = "#fff";
obj.style.backgroundColor = "white";
obj.style.backgroundColor = "rgb( 255, 255, 255 )";

フラグを利用すれば、背景色を切り替えることができます。

<div id="sample" style="border: 2px solid #000000;width:100px;height:100px;"></div>
<button id="btn" onclick="hoge()">button</button>

<script>

// 適当なフラグを利用する
let colorFlg = 0;

function hoge() {

  // 背景色を変更
  let obj = document.getElementById("sample");
  
  // colorFlgにより切り替え
  if(colorFlg == 0){
    obj.style.backgroundColor = "#3eb810";
    colorFlg = 1;
  }else{
    obj.style.backgroundColor = "#009688";
    colorFlg = 0;
  }

}

</script>

実行結果

サンプルコード

以下は、
「変更」ボタンをクリックして、指定した要素の背景色を切り替える
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    width: 500px;
  }
</style>
<script>

  let colorFlg = 0;

  function hoge() {

    // 要素を取得
    let obj = document.getElementById("sample");
    
    // colorFlgにより背景色を切り替え
    if(colorFlg == 0){
      obj.style.backgroundColor = "#3eb810";
      colorFlg = 1;
    }else{
      obj.style.backgroundColor = "#009688";
      colorFlg = 0;
    }

  }

</script>

<body>
  <div class="main">

    <h2><span id="sample" class="badge badge-primary">要素</span></h2>
    <button type="button" class="btn btn-raised btn-danger" onclick="hoge()">変更</button>

  </div>
</body>

</html>

背景色が切り替えられていることが確認できます。