使用 addEventListener 切換按鈕顏色

Question

我正在嘗試學習使用 addEventListener 切換按鈕顏色的 vanilla JS 方式。 我在理解如何將按鈕切換回原始顏色時遇到了一些麻煩。 這是我的代碼：

HTML

<h1>Hello</h1>
<section id="container"></section>

CSS

h1 {
font-family: sans;
}
#container {
padding: 2em;
background-color: tomato;
}

#container2 {
padding: 2em;
background-color: blue;
}

JS

var el = document.getElementById('container');
el.addEventListener('click', function() {
this.style.backgroundColor = 'blue';
});

jsbin

Answer 1

您可以通過清除背景顏色來恢復聲明的 CSS 樣式，如下所示：

this.style.backgroundColor = '';

小提琴在http://jsfiddle.net/xza5bt0q/

單擊該框以切換顏色。

Answer 2

您可以檢查是否設置了顏色，否則將其刪除：

el.addEventListener('click', function() {
    if (this.style.backgroundColor == 'blue') {
        this.style.backgroundColor = null;
    } else {
        this.style.backgroundColor = 'blue';
    }
});

Answer 3

像這里給定的代碼片段一樣嘗試

HTML

 <div id="toggleArea" class='active'> Toggle area see in class name </div>
 <button id="btnToggle"> Toggle Button </button>

JavaScript

const toggleArea = document.getElementById('toggleArea')
const btnToggle = document.getElementById('btnToggle')

btnToggle.addEventListener('click', function() {
  if (toggleArea.classList.contains('active')) {
    toggleArea.classList.remove("active");
    toggleArea.classList.add("disable");
  } else {
    toggleArea.classList.remove("disable");
    toggleArea.classList.add("active");
  }
  toggleArea.innerHTML =  toggleArea.classList[0]
})

Answer 4

我建議在單擊時切換 CSS 類。 然后您可以使用該類來控制顏色和其他屬性。

CSS

.container-active {
    background-color: blue;
}

JS

var ACTIVE_CLASS = 'container-active'; // define a css class 'constant'

var el = document.getElementById('container');
el.addEventListener('click', function () {
    var classes,
        idx;

    // simplest case: class name is empty
    if (this.className === '') {
        this.className = ACTIVE_CLASS;
        return;
    }

    // next: class name matches active
    if (this.className === ACTIVE_CLASS) {
        this.className = '';
        return;
    }

    // otherwise, if more complex, parse and modify classes
    classes = this.className.split(' ');
    idx = classes.indexOf(activeClass);
    if (idx === -1) {
        classes.push(activeClass);
    } else {
        classes.splice(idx, 1);
    }
    this.className = classes.join(' ');
});

Answer 5

嘗試以下代碼：HTML、CSS 和 Javascript。

在此代碼中，按鈕的默認顏色設置為藍色。 單擊按鈕后，它會將背景顏色更改為紅色。 如果您再次單擊它，背景顏色將更改為默認值，即藍色。

HTML

<button id="button" class="blueColor" onclick="toggle()">GET STARTED</button>

CSS

#button{
color: white;
width: 175px;
height: 50px;
border-radius: 5px;
font-family: arial;
font-weight: bold;
word-spacing: 3px;
border: none;
outline: none;
}

.blueColor{
background: blue;
}

.redColor{
background: red;
}

Javascript

<script>
function toggle(){
    var colorofbutton = document.querySelector("#button");

if(document.getElementsByClassName("blueColor")[0])
    {
        colorofbutton.classList.remove('blueColor');
        colorofbutton.classList.add('redColor');

    }
else
    {
    colorofbutton.classList.remove('redColor');
    colorofbutton.classList.add('blueColor');
    }
}
</script>