试图在单击时使用jQuery更改html的背景颜色
[英]trying to change background color of html using Jquery on click
问题描述
因此，我试图制作一个简单的小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>
4 个解决方案
解决方案1
2 2013-12-12 16:10:55
尝试更改：
var color = $("body").val("background-color")
至：
var color = $("body").css("background-color");
解决方案2
2 2013-12-12 16:11:05
.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" );
}
});
});
解决方案3
2 已采纳 2013-12-12 16:13:51
错误在这一行：
var color = $("body").val("background-color")
.val（）方法主要用于获取表单元素的值，例如输入，选择和文本区域。
要获取样式属性的值，请使用.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 );
}
});
});
解决方案4
2 2013-12-12 16:20:56
尝试：
$(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答案 ，它将为您提供所有颜色转换
使用jQuery单击更改背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.