您的位置：首页 > Web前端 > JavaScript

[js]点击更换背景颜色/图片

2012-06-26 15:34 483 查看

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">



</script>

<body onload="document.bgColor='lime'; returntrue;">

<a href="javascript:void(0);"onmouseover="randombackground()"><fontsize="5" face="宋体">碰我改变背景颜色</font></a>

</body>

------------------------------------------------------------------------------------------

点击更换背景图片：

<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;">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript button input url function float

相关文章推荐

新的分享

章节导航