0

我正在尝试比较tdJavaScript 中 a 的背景颜色，并且不知道如何准确调用颜色进行比较。颜色是在 CSS 中分配的（尽管它可以更改为在 php 中分配，如果有任何改变的话），并且td分配一个onclick=clickedOn(this)调用以下函数的颜色：

function clickedOn(elem)
{
    if(elem.style.backgroundColor=='#F0F0F5')
        elem.style.backgroundColor="blue";
    else
        alert("no");
}

我如何比较tdif 的现有背景颜色？

4

1 回答 1

1

如果颜色是通过 CSS 分配的，style 属性不会直接显示出来，你需要获取计算的样式。例如使用这个跨浏览器功能：

function getStyle(el, styleProp) {
   if (el.currentStyle)
      var y = el.currentStyle[styleProp];
   else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
   return y;
}

你可以运行比较像

 if(getStyle(elem, 'background-color') =='#F0F0F5')

更新这是测试该功能的完整代码。我必须再添加一个函数来将 RGB 颜色转换为十六进制（因为非 IE 浏览器返回 RGB 颜色）：

<style>
  .cell1{
      background-color: #E0E0E5
  }

  .cell2{
      background-color: #F0F0F5
  }
</style>

<table style="width:200px; height:200px;border: solid 1px black">
    <tr>
        <td class="cell1" onclick="clickedOn(this)"></td>
        <td class="cell2" onclick="clickedOn(this)"></td>
    </tr>
</table>

<script>
function clickedOn(elem)
{
    var bColor = getStyle(elem,'background-color');

    if( bColor.toUpperCase() =='#F0F0F5' || colorToHex(bColor).toUpperCase() =='#F0F0F5')
        elem.style.backgroundColor="blue";
    else
        alert("no");
}

function getStyle(el, styleProp) {
   if (el.currentStyle)
      var y = el.currentStyle[styleProp];
   else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
   return y;
}    

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);

    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};    

</script>

这是演示：http: //jsfiddle.net/UNE7S/

于 2013-09-13T00:25:34.473 回答