如何在Javascript中比较backgroundColor？

Question

为什么这不起作用？即使颜色是等于#ECECF4它仍然提醒"否".它正在我测试它时选择corrent元素.有没有更好的方法来写这个？

<script type="text/javascript">

function weekclick() {
    if (document.getElementById('w1').style.backgroundColor == "#ECECF4") {
        alert("Yes");
    } else {
        alert("No");
    }
}

</script>

Answer 1

应该不惜一切代价避免将颜色作为业务逻辑的一部分进行比较.

相反,将逻辑保留在JavaScript中并根据保存在某处的状态进行操作.然后,如果要通过更改颜色向用户发送视觉反馈,请向元素添加类.这样,JavaScript只知道类名,并且样式始终在CSS中被隔离.

$(".list").on("click", "li", function(){
    $(this).toggleClass('active');
});

.list {
  width: 100%;
  padding: 0;
}
.list li {
  padding: 5px 10px;
  list-style: none;
  cursor: pointer;
}
.list li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.list li.active {
  background-color: #eeeecc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

话虽如此,OP的代码适用于Chrome 17.0.963.56和Firefox 8.0.当您不知道要比较什么时,只需使用console.log()它来查看它的外观.

请注意,#ECECF4颜色与颜色相同,rgb(236, 236, 244)但表示方式不同.

IE7和IE8输出HEX值,IE9及其他浏览器输出RGB格式.因此,将颜色与跨浏览器兼容性进行比较是一项棘手的任务,最好的方法并不是很好.

我做了一个简单的功能,适用于大多数情况下大多数浏览器,甚至通过CSS设置颜色.

function weekclick() {
    var elemColor = getStyle(this, "backgroundColor"),
        color = "rgb(238, 238, 204)";

    console.log("Broswer returned elem color: ", elemColor);

    // IE7 and IE8 output the hex value
    if (elemColor.slice(0, 1) === '#') elemColor = hexToRgb(elemColor);

    console.log(elemColor, " === ", color, "?", elemColor === color);
}

// Source: https://stackoverflow.com/a/41354868/1218980
// Inspired by: https://stackoverflow.com/a/22744598/1218980
function getStyle(el, prop) {
    return (typeof getComputedStyle !== 'undefined' ?
        getComputedStyle(el, null) :
        el.currentStyle
    )[prop];
}


// Slightly modified version to quickly return a string
// https://stackoverflow.com/a/5624139/1218980
function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? "rgb(" + [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
    ].join(', ') + ")" : null;
}

#css-div {
  background-color: #eeeecc;
}

<div style="Background-color:#eeeecc" onclick="javascript:weekclick.call(this);">#eeeecc</div>
<div style="Background-color:#EEC" onclick="javascript:weekclick.call(this);">#EEC</div>
<div style="background-color:hsla(60, 50%, 86.7%, 1)" onclick="javascript:weekclick.call(this);">hsla(60, 50%, 86.7%, 1)</div>
<div style="background-color:rgb(238, 238, 204)" onclick="javascript:weekclick.call(this);">rgb(238, 238, 204)</div>
<div id="css-div" onclick="javascript:weekclick.call(this);">css</div>

我将weekclick函数调用为javascript:weekclick.call(this)传递元素本身作为回调的上下文,使得访问元素变得容易this.

可以扩展为在使用HSLA或RGBA时将alpha考虑在内.

当我最初在2012年写回这个答案时,我曾经navigator.appName === "Microsoft Internet Explorer"知道它是否是IE7,并且要比较的颜色改为其HEX等效物.不要这样做因为它今天不起作用.