0

tdJavaScriptで a の背景色を比較しようとしていますが、比較のために色を正確に呼び出す方法に困惑しています。色は CSS で割り当てられ (変更があれば、php で割り当てられるように変更できます) 、次の関数を呼び出すtdが割り当てられます。onclick=clickedOn(this)

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

その場合の既存の背景色を比較するにはどうtdすればよいですか?

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')

UPDATE関数をテストするための完全なコードは次のとおりです。RGB カラーを 16 進数に変換する関数をもう 1 つ追加する必要がありました (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 に答える