js点击更换背景颜色或图片的实例代码
1,按钮样式 复制代码 代码如下: <script> org_Color=document.bgColor.substring(1.10) </script> <form> <input type="button" value="淡黄色背景"onClick="document.bgColor='#feffc6'"> <input type="button" value="浅蓝色背景"onClick="document.bgColor='#c6fffe'"> <input type="button" value="粉红色背景"onClick="document.bgColor='#ffc9c6'"> <input type="button" value="墨绿色背景"onClick="document.bgColor='#508b7d'"> <input type="button" value="天蓝色背景"onClick="document.bgColor='#7BC7FF'"> <input type="button" value="米白色背景"onClick="document.bgColor='#f0f0f0'"> </form> 2,下拉样式 复制代码 代码如下: <selectonChange="document.bgColor=this.options[this.selectedIndex].value"> <option value="#C0C0C0">灰色的 <option value="BLACK">黑的色 <option value="d2c6ff">淡紫蓝 <option value="feefc7">太阳黄 <option value="ffd2c6">淡红橘 <option value="c7fed8">苹果绿 <option value="80ff80">草原绿 <option value="#C1BC59">橄榄色 <option value="#7BC7FF">天空蓝 <option value="#AEDFD3">蓝绿色 <option value="#508B7D">墨绿色 <option value="#F0F0F0">米白色 </select> 3,触碰样式 复制代码 代码如下: <scriptlanguage="Javascript"> <!-- function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground(){ function getColor(){ 点击更换背景图片: 复制代码 代码如下: <div style="float:right;margin-right:20px;"> <ahref="javascript:void(0);"><imgclass="button1"onClick="javascript:document.body.style.background='url(images/bg/1.jpg)'"></a> <ahref="javascript:void(0);"><imgclass="button2"onClick="javascript:document.body.style.background='url(images/bg/2.jpg)'"></a> <ahref="javascript:void(0);"><imgclass="button3"onClick="javascript:document.body.style.background='url(images/bg/3.jpg)'"></a> <ahref="javascript:void(0);"><imgclass="button4"onClick="javascript:document.body.style.background='url(images/bg/4.jpg)'"></a> <ahref="javascript:void(0);"><imgclass="button5"onClick="javascript:document.body.style.background='url(images/bg/5.jpg)'"></a> <ahref="javascript:void(0);"><imgclass="button6"onClick="javascript:document.body.style.background='url(images/bg/6.jpg)'"></a> </div> IE6不能用的解决方法: 复制代码 代码如下: <imgonClick="javascript:document.body.style.background='url(images/bg/1.jpg)';returnfalse;"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |