JavaScript 动态修改页面背景色与背景图片的实现
作者:像素漫游时间:2026-10-29 19:32:57浏览:590
本文介绍如何使用 JavaScript 动态修改网页背景颜色和背景图片。通过定义 update 函数,根据传入参数判断是改变 document.body.style.backgroundColor 还是设置背景图像,并绑定按钮点击事件实现交互效果。
JavaScript 动态修改页面背景色与背景图片的实现
本文详细介绍利用 JavaScript 动态调整网页背景颜色及背景图片的具体实现方式,供开发者参考使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE=javascript>
function update(temp)
{
if(temp == 'color')
{
document.body.style.backgroundColor="#FFFFFF";//改变背景色
}
if(temp == 'img')
{
document.body.style.backgroundImage="url(images/bgimg.gif)";//改变背景图片
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#CCFFFF">
<input type = button value="改变背景色" onclick="update('color')">
<input type = button value="改变背景图片" onclick="update('img')">
</BODY>
</HTML>
希望上述内容对您的 JavaScript 编程实践有所助益。
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
相关标签:
