javascriptでのstyleの値

Question

クリックで色が変わるtoggleの作成をしていますが、a.style.backgroundがコンソールに表示されません。
始めの色はlimegreenで初回クリックだけ白に代わって２回目以降は反応なしです。どうすればいいでしょうか？

(function () {
            const a = document.querySelector('.a');
            a.addEventListener('click', () => {
                console.log(a.style.background);
                if(a.style.background === '#fff'){
                    a.style.background = 'limegreen';
                }else{

                    a.style.background = '#fff';
                }
            })

        })();

Comments

[kei344]

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

このようにCSSのclassで色を指定して、classを入れ替えて色を変えたほうが正しく動くと思います。
背景色はChromeでは"rgb(xxx, xxx, xxx)"という形式で値が返ってきました。１６進数で比較するとうまく動きません。

.limegreen {
  background-color: limegreen;
}
.white {
  background-color: white;
}

<div class="a">テスト</div>

(function () {
  const a = document.querySelector('.a');
  a.addEventListener('click', () => {
    if(a.classList.contains('white')){
      a.classList.remove('white');
      a.classList.add('limegreen');
    } else {
      a.classList.add('white');
      a.classList.remove('limegreen');
    }
  })
})();

この例では、
背景色が白「classList.contains('white')がtrue」のとき、
limegreenクラスをdiv要素にclassList.addで加えて、whiteクラスをa.classList.removeで削除します。その時の背景色はlimegreenになります。
背景色が白い外の場合は、
whiteクラスをdiv要素にclassList.addで加えて、limegreenクラスをa.classList.removeで削除します。その時の背景色はwhiteになります。

Comments

[mentanpinsan]

うまくいきました。a.className==='a'も同様の結果でした。ありがとうございました。

Answer 2

style.backgroundの値を条件分岐に使うのではなく、別なところにフラグを作ってください。

style.background = '#fff';のように代入しても、次にstyle.backgroundを参照したときにはrgb(255, 255, 255)のような別の表記に変換されることがあるようです。

Comments

[mentanpinsan]

console.log(a.style.width);
console.log(a.style.position);
console.log(a.style.display);
console.log(a.style.zIndex);
console.log(a.style.margin);

これらすべて空文字で帰ってきます。cssの値を参照するのは遠慮しときます。