从js更改背景颜色答案

【问题标题】：Change background color from js从js更改背景颜色
【发布时间】：2017-12-16 17:29:57
【问题描述】：

我会通过 onclick javascript 函数设置元素的背景颜色。我的代码是：

function changeBg( el ) {
    if( $( el ).css( "background-color" ) === "rgb(255,255,0)" ) {
        $( el ).css( "background-color", "red" );
    }
    else {
        $( el ).css( "background-color", "rgb(255,255,0)" );
    }
}

此代码可用于将默认背景颜色更改为黄色 (rgb(255, 255,0))，但不能从黄色变为红色。第一个条件总是被跳过

【问题讨论】：

我建议将 jQuery 对象放在一个变量中。而不是在每一行上创建一个新的 jQuery 对象。
尝试捕捉价值，在比较之前，会有所不同。因为是解析为十六进制，而你的比较是RGBA
我尝试打印元素背景颜色的typeof和值并返回String rgb(255,255,0)
当您比较字符串时，请尝试在 RGB 值之间放置空格，因为这可能是问题$( el ).css( "background-color" ) === "rgb(255, 255, 0)"
你确定它没有返回带有空格的“rgb(255, 255, 0)”

标签： javascript jquery css background-color

【解决方案1】：

为了更好的方式使用 toggleClass() 而不是在 dom 中匹配颜色值

function changeBg(el) {
  $(el).toggleClass('red')
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeBg(this)">change</button>

【讨论】：

内联js/css引起的js需要停止:D这个应该用^^:)

【解决方案2】：

试试这个：

$(document).ready(function(){
    $('button').click(function(){
        $(this).toggleClass('redColor');
    })
})

button {
    background-color: yellow;
}

.redColor {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click Me!</button>

【讨论】：

【解决方案3】：

试试这个

$(document).ready(function() {
$('.container').on('click',function(){
  var el = ".container";
  if ($(el).css("background-color") === "rgb(255, 255, 0)") {
    $(el).css("background-color", "red");
  } else {
    $(el).css("background-color", "rgb(255, 255, 0)");
  }
  });
});

.container {
  background-color: rgb(255, 255, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Test
</div>

【讨论】：