[英]Toggle button color with addEventListener
I'm trying to learn the vanilla JS way of toggling a button color with addEventListener.我正在尝试学习使用 addEventListener 切换按钮颜色的 vanilla JS 方式。 I'm having some trouble understanding how to switch the button back to the original color.
我在理解如何将按钮切换回原始颜色时遇到了一些麻烦。 Here is my code:
这是我的代码:
HTML HTML
<h1>Hello</h1>
<section id="container"></section>
CSS CSS
h1 {
font-family: sans;
}
#container {
padding: 2em;
background-color: tomato;
}
#container2 {
padding: 2em;
background-color: blue;
}
JS JS
var el = document.getElementById('container');
el.addEventListener('click', function() {
this.style.backgroundColor = 'blue';
});
You can restore the declared CSS style by clearing the background color, like this:您可以通过清除背景颜色来恢复声明的 CSS 样式,如下所示:
this.style.backgroundColor = '';
Fiddle at http://jsfiddle.net/xza5bt0q/小提琴在http://jsfiddle.net/xza5bt0q/
Click the box to toggle the color.单击该框以切换颜色。
You could check if a color is set and remove it otherwise:您可以检查是否设置了颜色,否则将其删除:
el.addEventListener('click', function() {
if (this.style.backgroundColor == 'blue') {
this.style.backgroundColor = null;
} else {
this.style.backgroundColor = 'blue';
}
});
Try like the given code snippet here像这里给定的代码片段一样尝试
HTML HTML
<div id="toggleArea" class='active'> Toggle area see in class name </div>
<button id="btnToggle"> Toggle Button </button>
JavaScript 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]
})
I would recommend toggling a CSS class when clicking.我建议在单击时切换 CSS 类。 Then you can use the class to control color and other properties.
然后您可以使用该类来控制颜色和其他属性。
CSS CSS
.container-active {
background-color: blue;
}
JS 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(' ');
});
Try the following codes: HTML, CSS, and Javascript.尝试以下代码:HTML、CSS 和 Javascript。
In this code, the default color of the button is set to be blue.在此代码中,按钮的默认颜色设置为蓝色。 Once you click the button, it changes the background-color to red.
单击按钮后,它会将背景颜色更改为红色。 If you click it again, the background-color changes to the default ie blue.
如果您再次单击它,背景颜色将更改为默认值,即蓝色。
HTML HTML
<button id="button" class="blueColor" onclick="toggle()">GET STARTED</button>
CSS 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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.