logo标签列表

按钮背景颜色切换

javascripthtmlbuttonbackground-color
3

我一直在试图通过点击按钮来切换background-color属性，但颜色只更改一次，不能来回切换。以下是代码。

function btnColor(btn, color) {
var property = document.getElementById(btn);
    if (property.style.backgroundColor == "rgb(244,113,33)") {
        property.style.backgroundColor=color;
    }
    else {
        property.style.backgroundColor = "rgb(244,113,33)";
    }
}

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />
在 if 之前使用 console.log property.style.backgroundColor，你就能看到它的实际值。 - Teemu
2个回答
5
一种简单的解决方案（按顺序使用JS、CSS和HTML）。 您可以在CSS中设置一个类，然后选择按钮（是的，JS可以在一行内完成），并切换该类。 

var button1 = document.querySelector("button");


button1.addEventListener("click", function() {

    document.body.classList.toggle("colorred");

});
.colorred {
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Change color to background</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />


</head>

<body>
    <button>Click me!</button>
    <script src="main.js"></script>
</body>

</html>

4
您遇到的问题是元素的background-color在不同的浏览器中以不同的方式报告，可以是rgb、带或不带空格的rgba、十六进制或HSL格式。
因此，按钮很可能永远不会满足if条件，这意味着它将始终转到else。
考虑到这一点，建议使用类名来跟踪未/切换状态：
function btnColor(btn, color) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.style.backgroundColor=color;
        property.className = 'toggled'
    }
    else {
        property.style.backgroundColor = "rgb(244,113,33)";
        property.className = '';
    }
}

JS Fiddle演示。

当然，如果我们正在使用元素的class，那么我们可以使用CSS来样式化该元素：

function btnColor(btn) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.className = 'toggled'
    }
    else {
        property.className = '';
    }
}

使用CSS：

有了CSS：

#btnHousing {
    background-color: rgb(255,242,0);
}

#btnHousing.toggled {
    background-color: rgb(244,113,33);
}

JS Fiddle演示。

前面的JavaScript可以简化（使用相同的CSS）为：

function btnColor(btn) {
    var property = document.getElementById(btn);
    property.className = 'toggled' == property.className ? '' : 'toggled';
}

JS Fiddle demo.

你建议我使用什么？ - ayush
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接