如何将按钮恢复到原来的颜色?

How can I return a button to its original color

本文关键字：原来 颜色 恢复 按钮      更新时间：2023-09-26

我有以下代码，我试图弄清楚如何才能设置第一个按钮为白色，如果我再次点击它，同样的事情为下一个按钮。如果我点击一次它就会变成红色，但如果我再次点击，它就会变成白色。任何想法。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> color divs </title>
        <meta name="author" content="Lee Middleton" />
        <meta name="keywords" content="CIS120/121/122" />
        <meta name="description" content="Template for x/html, CSS and JavaScript" />
        <style type="text/css">
            .container {
                border: 1px solid blue;
                border-radius: 10px;
                width: 100px;
                height: 50px;
            }
        </style>
        <script language="javascript">
            function changeColor(whichOne)
            {
                var thatOne = eval(whichOne);
                var element = document.getElementById(whichOne);
                var color = "ff";
                var stringColor;
                if (whichOne == 1)
                {
                    stringColor = "#" + color + "0000";
                    else {
                        alert('it was clicked') ;
                    }
                }


                }
                else if (whichOne== 2)
                {
                    stringColor = "#0000" + color;
                }
                element.style.backgroundColor = stringColor;
            }
        </script>
    <body>
        <div class='container' id='1' style='margin: 150px 0 0 75px; float: left;' onclick='changeColor(1);'></div>
        <div class='container' id='2' style='margin: 150px 0 0 175px; float: left;' onclick='changeColor(2);'></div>
        <div class='container' id='3' style='margin: 150px 0 0 220px; float: left;' onclick='changeColor(3);'></div>
    </body>
    </html>

正如另一种解决方案所提到的，您可以将先前的颜色存储在一个变量中，以便在必要时重置它，但是如果您只想将元素返回到其默认颜色，则有一种更简单的方法。

只做:

element.style.backgroundColor = '';

这只是取消style属性的background-color部分，允许使用css中的颜色。

要在默认值和颜色之间切换你可以这样做:

element.style.backgroundColor = element.style.backgroundColor ? '' : '#' + color;

您需要将按钮的先前状态保存在此函数之外，如

var prevColor = "#ffffff";
function changeColor(whichOne) {
prevColour = (this.prevColor=="#ffffff")?"#ff0000":"#ffffff";
// use this prevColour to change button colour
}

第一点

遇到{}闭包问题。您的第一个if包含一个没有关联if的else。同样的if是close{}但是在else if

之前再次关闭它

2如果我理解正确的话，你有一个功能来切换按钮的颜色，基于它的ID。

我会写类似的东西

if(document.getElementById(whichOne).style.backgroundColor==COLOR1)
{
  document.getElementById(whichOne).style.backgroundColor = COLOR2
}
else
  documenet.getElementById(whichOne).style.backgroundColor = COLOR2

Color 1和Color 2以及函数中的常量，不需要填充命名空间

从切换事件中通过CSS标记切换background-color或任何您想要操作的属性。

把这个类添加到你的CSS中

   .container {
       background-color: #d1d1d1; 
   }
   .colorMe{
       background-color: red;
   }

使用这个脚本

   $(document).ready(function(){
       $('.container').on("click", function(){
           $(this).toggleClass('colorMe');
       });          
   });
HTML 

   <div class='container'> Button-1 </div>
   <div class='container'> Button-2 </div>
   <div class='container'> Button-3 </div>

不要忘记链接jQuery库。

下面是一个活生生的工作示例:

如果你想做的只是改变外观，那么你应该坚持使用CSS类。正是这种类型的内联代码，当您在几个月后调试它时，当客户希望它变成粉红色而不是白色时，会让您感到头痛。

内联事件绑定也是如此。Javascript可以通过多种方式调用，当有小片段分散在HTML中时，跟踪它们很快就会成为一种负担。

我建议这样做:

HTML 

<div class='container green' id='1' ></div>
<div class='container blue' id='2' ></div>
<div class='container yellow' id='3'></div>

风格
.container.active { background-color:white;}
JAVASCRIPT 

function changeColor(el){
    var classes = el.className.split(' '), // get the current classes
        index = classes.indexOf('active'), // see if 'active' is one of them
        hasClass = index > -1;             
     if (hasClass)
         el.className = (classes.splice(index, 1), classes.join(' ')); // remove 'active' and stringify
     else
         el.className+= " active";
}
// put all calls that require the DOM to be loaded in a function
function init(){
    var divs = document.getElementsByClassName('container'),     // get all elements that need binding
        divCount = divs.length;                                  // the length of the array for looping
    // loop through array
    while(divCount--){
        // bind each element
        // using an anonymous function wrapper to pass 'this' parameter
        divs[divCount].addEventListener('click', function() { changeColor(this) }); 
    }
}
// fire the init function once the window is loaded
window.addEventListener('load', init);
http://jsfiddle.net/NpW9X/

你可以试试:

JavaScript: 

var times = 0;
function isEven(num) {
    if (num % 2 == 0) return true;
    else return false;
}
function changeColor(whichOne) {
    if (isEven(times)) {
        document.getElementById(whichOne).style.color = 'white';
    } else {
        document.getElementById(whichOne).style.color = 'red';
    }
    times++;
}
相关文章：