CSS

Question

我是javascript的新手..我想知道是否有任何简单的方法可以在javascript中切换背景颜色..

这是html代码

<td  style="width:70px;height:70px;background-color:white;" class="white" onclick="place(this,2,1)"></td>
<td  style="width:70px;height:70px;background-color:black;" class="black" onclick="place(this,2,2)"></td>

这是javascript代码

function place(domObj,row,col){

            var placeQueen=false;


            if(domObj.style.backgroundColor=="black"||domObj.style.backgroundColor=="white")
                domObj.style.backgroundColor="red";



            if(domObj.style.backgroundColor=="red")
                domObj.style.backgroundColor=domObj.className;
}

但它似乎无法正常工作..

Answer 1

事实上，第二个if应为else if：

if(domObj.style.backgroundColor=="black"||domObj.style.backgroundColor=="white")
     domObj.style.backgroundColor="red";
else if(domObj.style.backgroundColor=="red")
     domObj.style.backgroundColor=domObj.className;

Demo.

注意：您不应该使用内联样式，只需使用类，您可以使用纯javascript classList.toggle()（element.classList）切换类，如果该功能是不受支持，您甚至可以尝试使用某种算法修改className。最后，你应该使用jQuery。现在搜索它并立即开始，现在不是时候使用纯Javascript，尽管在深入研究jQuery之类的框架之前最好先学习它。

Answer 2

您似乎混合了内联样式和CSS类，这似乎是不必要的...... 我建议删除内联样式并使用css类。内联样式添加了重复的代码，使代码难以理解，难以使用。

这是MDN在Why Use CSS上发表的一篇文章。

对于手头的任务，您可以使用classList API进行CSS类操作。

HTML

<td class="white" onclick="place(this)"></td>
<td class="black" onclick="place(this)"></td>

CSS

.black{
  background:black;
}
.white{
  background:white;
}
.red{
  background:red !important;
}

JS

function place(domObj) {
  domObj.classList.toggle("red");
}

JSFiddle

如果您问我，HTML，CSS和JS更简单，易读且易于扩展......

Answer 3

您需要添加else。实际上，您将背景更改为红色，然后立即返回黑色或白色（因为现在将满足第二个if语句）：

function place(domObj,row,col){

            var placeQueen=false;


            if(domObj.style.backgroundColor=="black" || domObj.style.backgroundColor=="white")
                domObj.style.backgroundColor="red";
            else if(domObj.style.backgroundColor=="red")
                domObj.style.backgroundColor=domObj.className;
}

您的解决方案非常有趣。您可能想要查看像jQuery这样的库。它会使这样的事情变得更加容易。

Answer 4

如果你不介意jQuery解决方案，你可以这样做：

CSS

.red{ background-color:red;}
.black{ background-color:#000;}

HTML

<td  style="width:70px;height:70px;" class="red"></td>
<td  style="width:70px;height:70px;" class="black"></td>

的jQuery

$(function(){
   $('td.red, td.black').on('click', function(){
        var this_class = $(this).attr('class');
       if(this_class == 'red')
       {
           $(this).removeClass('red');
           $(this).addClass('black');
       }
       else
       {
           $(this).removeClass('black');
           $(this).addClass('red');
       }            
   });
});

jQuery代码可以减少更多，但我保持简单，以便它是可理解和可读的。

注意：这还要求您在使用之前在网页上加入jQuery库。

DEMO

是否有任何简单的方法来切换javascript中的背景颜色.. ??

4 个答案:

Demo.

CSS

HTML

的jQuery