[代码收集]JS自定义改变网页背景及文字颜色 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2013-10-12 05:16:21 -0700

★Js自定义改变网页背景及文字颜色★

请勿抄袭本页面

代码说明

HTML+JavaScript共同实现的网页背景特效，背景及文字颜色的改变，按钮改变背景色，只需要选择下拉框中的颜色值，便可改变网页的背景颜色，用的时候，可能要对代码做些修改。转自源码爱好者

html代码(body位置)

<style>
#changeCol{background:#333;color:#F5F5F5;border:2px solid #abcdef;}
#changeCol tr{background:#333;}
#changeCol td{text-align:left;}
</style>
<center>
<table id="changeCol">
<tbody><tr><td><script>
function color(){
document.body.style.backgroundColor=(""+ colc.cc.value +"");
document.body.style.color=(""+ colc.tc.value +"");
}
</script>
<form name="colc">
请选择颜色</td></tr>
<tr><td>背景色:</td>
<td><select name="cc">
<option value="#F5F5F5" selected>雪白
<option value="black">黑色
<option value="blue">蓝色
<option value="green">绿色
<option value="skyblue">淡蓝
<option value="orange">橙色
<option value="purple">紫色
<option value="red">红色
<option value="silver">银色
<option value="yellow">黄色
<option value="white">白色</option></select></td></tr>
<tr><td>文字色:</td>
<td><select name="tc">
<option value="orange">橙色
<option value="purple">紫色
<option value="red">红色
<option value="silver">银色
<option value="yellow">黄色
<option value="white">白色 
<option value="black" selected>黑色
<option value="blue">蓝色
<option value="green">绿色
<option value="skyblue">淡蓝
</option></select></td></tr>
<tr><td><input onclick="color()" type="button" value="改变颜色" name="button"></td></tr></form></tbody></table>
</center>

html代码(我的磨专用版)

<style>
#changeCol{background:#333;color:#F5F5F5;border:2px solid #abcdef;}
#changeCol tr{background:#333;}
#changeCol td{text-align:left;}
</style>
<center>
<table id="changeCol">
<tbody><tr><td><script>
function color(){
document.getElementById("whole_body").style.backgroundColor=(""+ colc.cc.value +"");
document.body.style.color=(""+ colc.tc.value +"");
}
</script>
<form name="colc">
请选择颜色</td></tr>
<tr><td>背景色:</td>
<td><select name="cc">
<option value="#F5F5F5" selected>雪白
<option value="black">黑色
<option value="blue">蓝色
<option value="green">绿色
<option value="skyblue">淡蓝
<option value="orange">橙色
<option value="purple">紫色
<option value="red">红色
<option value="silver">银色
<option value="yellow">黄色
<option value="white">白色</option></select></td></tr>
<tr><td>文字色:</td>
<td><select name="tc">
<option value="orange">橙色
<option value="purple">紫色
<option value="red">红色
<option value="silver">银色
<option value="yellow">黄色
<option value="white">白色 
<option value="black" selected>黑色
<option value="blue">蓝色
<option value="green">绿色
<option value="skyblue">淡蓝
</option></select></td></tr>
<tr><td><input onclick="color()" type="button" value="改变颜色" name="button"></td></tr></form></tbody></table>
</center>

代码演示

请选择颜色
背景色:
文字色:

[代码仅供参考，转载请注明出处]

----Comments(4)----
jrj (@jrj) | @ at 2013-10-15 09:07:
偷走

洁小筱 (@jxx) | @ at 2013-10-14 03:28:
收……藏

小孩 (@luchaorong) | @ at 2013-10-13 07:55:
拿走

迷失的音乐 (@misw) | @ at 2013-10-12 05:37:
我喜欢，我要了，不解释

Subscribe | Register | Login | N