jquery练习2 div与按钮的样式变化

来源：互联网发布：阿里云数据库克隆编辑：程序博客网时间：2024/05/20 08:26

目前还有些问题,尽管能够变色,变色按钮的文本内容"变红""变黑"不能正确切换,不负责任的怀疑是底层代码颜色表示的问题......

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function() {$("#button1").click(function() {$("#goalId").toggleClass("LWidth");if($("#goalId").css("width")=='200px'){$("#button1").html('变窄');}else{$("#button1").html('变宽');}});$("#button2").click(function() {$("#goalId").toggleClass("LHeight");if($("#goalId").css("height")=='200px'){$("#button2").html('变低');}else{$("#button2").html('变高');}});$("#button3").click(function() {$("#goalId").toggleClass("Red");//alert("color: " + $("#goalId").css("background-color"));//返回结果 rgb(255,0,0),安全起见颜色都用rgb()表示了if($("#goalId").css("background-color")=='rgb(255,0,0)'){//但是没法改文本$("#button3").html('变黑');}else{$("#button3").html('变红');}});$("#button4").click(function() {//$("#goalId").toggle();//这样不方便去隐藏$("#goalId").toggleClass("Hidden");if($("#goalId").css("display")=='none'){$("#button4").html('显示');}else {$("#button4").html('隐藏');}});$("#button5").click(function() {//$("#goalId").toggleClass("goal",true);//$("#goalId").css("display","block");$("#goalId").removeClass("LWidth LHeight Red Hidden");});});</script><style type="text/css">div.wrapper { /*class,所以.wrapper*/width: 500px;margin: 0 auto; /*让其中内容居中*/padding: 0;text-align: center; /*把文本居中*/}.goal { width: 100px;height: 100px;background-color: rgb(0,0,0);margin: 10px auto;display: block; /*将它显示为块元素*/}.LWidth {width: 200px;}.LHeight {height: 200px;}.Red {background-color: rgb(255,0,0);}.Hidden{display:none;}</style></head><body><div class="wrapper"><button type="button" id="button1">变宽</button><button type="button" id="button2">变高</button><button type="button" id="button3">变红</button><button type="button" id="button4">隐藏</button><button type="button" id="button5">重置</button><div class="goal" id="goalId"></div></div></body></html>

阅读全文

0 0