您遇到的问题是元素的
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.
if
之前使用console.log property.style.backgroundColor
,你就能看到它的实际值。 - Teemu