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

我建议在点击时切换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 4

尝试以下代码：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>

Answer 5

在这里尝试使用给定的代码段

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]
})

使用addEventListener切换按钮颜色

5 个答案: