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

trying to change background color of html using Jquery on click

本文关键字：html 更改 背景 颜色 Jquery 单击      更新时间：2023-09-26

所以我正在尝试制作一个简单的Jquery小函数，当你点击它时，它会改变主体的背景色。当点击主体时，如果它是红色，就把它改成橙色，否则就把它变成红色。

我的代码（是的，我知道将脚本、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>

错误在这一行：

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

.val（）方法主要用于获取表单元素的值，如input、select和textarea。

要获取样式属性的值，请使用.css（）方法：

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 );
    }
  });
});

尝试更改：

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

收件人：

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

.val()不会返回元素的css属性。.css('style-name')将获得该传递样式的值。请阅读此处了解更多关于.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" );
      }
  });
});

尝试：

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

演示

颜色将被解释为RGB格式，所以你实际上需要测试它，而不是颜色的文本表示（如红色、蓝色等）。

根据文件

如果该值是半透明的，则计算出的值将是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');
  });
 });

演示

这是一个SO答案，它将为您提供所有的颜色转换

相关文章：