JavaScript实现网页背景与字体颜色动态切换

本文详细介绍利用JavaScript动态调整网页背景色与字体颜色的具体实现方案，旨在为开发者提供实用的参考案例。

该功能通过页面内的多个颜色切换按钮实现交互。点击不同按钮，网页的背景色与文字颜色会同步变更为预设的颜色组合。这是一个基础且实用的JavaScript应用示例。

基本目标与实现原理

一、基本目标

页面加载完成后，首先弹出问候提示“你好”。

页面中包含多个用于切换颜色的按钮，其中包含一个“返回”按钮，点击后可将背景恢复为白色，字体恢复为黑色，即网页默认状态。

点击不同的颜色按钮，网页的背景色与字体颜色会相应地改变为对应的颜色组合。

虽然可以设计更多颜色（如彩虹色），但原理相同，此处仅列举部分按钮以简化示例。

二、基本思想

实现的关键在于为HTML中的body标签和字体元素（如span）分配唯一的ID，以便JavaScript能够通过DOM方法精确控制其样式。本例展示了如何调用JS函数来动态修改CSS属性。

制作过程与代码示例

三、制作过程

以下是一个简单的页面示例，具体实现细节请参见代码注释：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js换背景颜色</title>
<!--这段同样可以分离到一个js文件里面去，但这段代码实在是太短了，就没有必要了-->
<script type="text/javascript">
//onload相当于本网页的构造函数，onunload相当于本网页的析取函数
function load() {
alert("你好！");
}  
function unload() {
alert("再见！");
}  
function Changecolor(bcolor, fcolor) {
//相当于对于字体<span style="color:传过来的fcolor">这样，改变字体的颜色
document.getElementById("body").style.background = bcolor;
document.getElementById("ziti").style.color = fcolor;
}  
</script>
</head>
<!--关键给整个网页与行内字体提供一个id，JS中的getElementById()方法能够轻松控制CSS中的东西-->
<body onload="load()" onunload="unload()" id="body">
<span id="ziti">js</span>
<br />
<!--注意在双引号中传递参数时，原来的双引号要变成单引号，onclick的值是一旦点击本按钮就被激发的东西-->
<input onclick="Changecolor('#ff0000','#ffffff')" type="button"
value="赤" />
<input onclick="Changecolor('#ff9900','#ffffff')" type="button"
value="橙" />
<input onclick="Changecolor('#ffff00','#000000')" type="button"
value="黄" />
        ……  
<input onclick="Changecolor('#ffffff','#000000')" type="button"
value="返回" />
</body>
</html>

onunload()函数主要在IE浏览器关闭页面时触发，且该对话框不会置顶显示；在Google Chrome等现代浏览器中此函数通常无效。因此，该函数的实际使用价值有限。

对JavaScript颜色操作技巧感兴趣的朋友，还可以参考以下在线工具：

RGB颜色编码生成器

在线网页配色工具

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

希望本文所述的JavaScript程序设计技巧能对读者有所帮助。