尝试在单击时使用 Jquery 更改 html 的背景颜色答案

【问题标题】：trying to change background color of html using Jquery on click尝试在单击时使用 Jquery 更改 html 的背景颜色
【发布时间】：2013-12-31 03:40:58
【问题描述】：

所以我正在尝试制作一个简单的小 Jquery 函数，当您单击它时它会更改正文的背景颜色。当body被点击的时候，如果是红色的，就改成橙色，否则就改成红色。

我的代码（是的，我知道将我的脚本、css 和 html 放在一个页面上的问题，但这只是我代码的这一方面的试验场。）

<!DOCTYPE html>
<html>
<head>
    <style>
        body {background-color: red}
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("body").on("click",(function(){
    var color = $("body").css("background-color")

        if (color == rgb(255,0,0)){
          $("body").css("background-color",    rgb(255,165,0) );
      }
      else{
        $("body").css("background-color",   rgb(255,0,0) );
      }


  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>Some Text</p>
<p>Around</p>
<p>Here<p>
<p>Yep.</p>
</body>
</html>

【问题讨论】：

body 标记没有可通过其 jQuery 选择器调用的 .val() 方法，因为它没有 value。这不是input、select 等。
喜欢这个？ jsfiddle.net/9cHYa
更新了一些给出的答案。为什么现在这不起作用？一些人建议的第三版工作得很好，但我很好奇为什么这不起作用。
@user1768884 我在回答中解释了：.val 对正文元素无效！ "rgb(255,0,0)" NOT rgb(255,0,0) 它是字符串而不是对象
@user1768884 因为它是一个表示颜色而不是对象的字符串。我误解了你的评论问题..：D

标签： javascript jquery html css if-statement

【解决方案1】：

错误在这一行：

var color = $("body").val("background-color")

.val() method主要用于获取input、select、textarea等表单元素的值。

要获取样式属性的值，请使用.css() method：

var color = $("body").css("background-color")

另一个错误是 .css() 方法接受字符串颜色为 "red" 和 "orange" 但它返回 rgb 颜色代码 "rgb(255, 255, 255)" 所以你应该使用颜色的 rgb 表示来测试正文背景颜色。

$(document).ready(function(){
  $("body").click(function(){
    var orange="rgb(255, 165, 0)";
    var red="rgb(255, 0, 0)";
    var color = $("body").css("background-color")   
    if (color == red){
       $("body").css("background-color", orange );
    }
    else{
       $("body").css("background-color", red );
    }
  });
});

【讨论】：

【解决方案2】：

尝试改变：

var color = $("body").val("background-color")

收件人：

var color = $("body").css("background-color");

【讨论】：

【解决方案3】：

.val() 不会返回元素的 css 属性。 .css('style-name') 将获得该传递样式的值。请阅读here 了解更多关于 .css() 的信息。

试试，

$(document).ready(function(){
  $("body").click(function(){
    var color = $("body").css("background-color")   
        if (color == "red"){
            $("body").css("background-color", "orange" );
      }
      else{
        $("body").css("background-color", "red" );
      }
  });
});

【讨论】：

【解决方案4】：

试试：

  $(function(){
    $("body").click(function(){
        $(this).css("background-color", function(_, val){
            return val === "rgb(255, 0, 0)" ? "rgb(255,165,0)" : "rgb(255, 0, 0)";
        });
    });
  });

Demo

颜色将以 RGB 格式解释，因此您实际上需要对其进行测试，而不是颜色的文本表示（如红色、蓝色等）。

According to Docs

如果该值是半透明的，则计算的值将是 rgba() 对应的值。如果不是，它将是 rgb() 对应的一个。透明关键字映射到 rgb(0,0,0)。

请记住，当您使用.css 时，它会为元素添加内联样式，您可以切换类以解决处理RGB 格式的问题。

CSS：

body{background-color:red;}
body.orange {background-color:orange;}

JS：

 $(function(){
  $("body").click(function(){
    $(this).toggleClass('orange');
  });
 });

Demo

Here is an SO answer 将为您提供所有颜色转换

【讨论】：

刚刚添加了我的答案，因为在发布我的时候，所有其他答案都没有指出 RGB 的颜色......他们都不会工作。