Question

所以当你点击它时，我正在制作这个改变背景颜色的按钮，但当你再次点击它时，颜色会恢复到默认状态（你第一次点击之前的颜色）。这是我的HTML：

<span onclick="Switch(this)" class="button" id="button1">button</span>

和我的javascript：

<script type="text/javascript">
        function Switch(obj) {
            var div = document.getElementById(obj);
            if(div.style.backgroundColor === "#6DFC93"){
                div.style.backgroundColor = "#27D956";
            }else{
                div.style.backgroundColor = "#6DFC93";
            }

        }
    </script>

有什么建议吗？

Answer 1

你可以做的是制作一个颜色数组，并使用math.random在每次单击按钮时从该数组中随机选择一种颜色。按钮按下按钮可以充满乐趣！

希望这有帮助

＆＃13;

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643'];
                
function clickMe(){
  var randomize = Math.floor(Math.random()*myColors.length);
  $('.box').css("background-color", myColors[randomize]);
}

＆＃13;

.THEbtn{
  border: 1px solid #323643;
  border-radius: 50px;
 }

.box{
  margin-top: 10px;
  height: 300px;
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='THEbtn' onclick='clickMe()'>Click Me</button>

<div class='box'></div>

＆＃13;

Answer 2

参考How to get hex color value rather than RGB value?，并且考虑到传递给Switch函数的参数已经是当前对象，我的解决方案是（值obj.style.backgroundColor是rgb格式）：

＆＃13;

var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

function rgb2hex(rgb) {
  if (rgb.trim().length == 0) {
    return "";
  }
  var savedValue = rgb;
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  if (rgb == null) {
    return savedValue;  // if not RGB format
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}


function Switch(obj) {
  if(rgb2hex(obj.style.backgroundColor) == "#6DFC93"){
    obj.style.backgroundColor = "#27D956";
  }else{
    obj.style.backgroundColor = "#6DFC93";
  }
}

＆＃13;

<span onclick="Switch(this)" class="button" id="button1">button</span>

＆＃13;

Answer 3

你已经有了一个对象为什么要getElementById？

function Switch(obj) {
            if(obj.style.backgroundColor === "#6DFC93"){
                obj.style.backgroundColor = "#27D956";
            }else{
                obj.style.backgroundColor = "#6DFC93";
            }

        }

Answer 4

如果您想在第一次点击后更改颜色，那么这应该可以正常工作。

function Switch（obj）{ obj.style.backgroundColor =“＃27D956”; }

Answer 5

稍微不同的路线，如果您也可以访问CSS，则适用于简单地切换改变颜色的类

element.classList.toggle( 'button--isSwitched' )

请注意，classList绝对不支持任何地方，但有可用的填充。

.button {
  background-color: blue;
}

.button--isSwitched {
  background-color: red;
}

每次单击时，javascript都会使背景颜色发生变化

5 个答案: