通过javascript改变背景颜色

<html><head><metahttp-equiv="Content-Type"content="text/html;chars... 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>随机显示的背景图片</title>
<script language="javascript">
bg = new Array(2); // 设定图片数量，如果图片数为3，这个参数就设为2，依次类推
bg[0] = '13_3_1.jpg' // 显示的图片路径，可用http://
bg[1] = '13_3_2.jpg'
bg[2] = '13_3_3.jpg'
index = Math.floor(Math.random() * bg.length); // 随机背景图片索引
var p = document.getElementsByTagName('body')[0]; // 得到body元素
var ss="URL("+bg[index]+")"
p.style.backgroundImage=" URL(13_2.jpg)" // 设置背景图片
</script>
</head>
<body>
<center>
<h1>随机显示的背景图片</h1>
<hr>
<br>
<h5>刷新页面试试...</h5>
</center>
</body>
</html>
错了，改变背景！展开

 我来答

3个回答

#热议# 为什么说不要把裤子提到肚脐眼？

xep0825
2011-07-12 · TA获得超过623个赞

知道小有建树答主

回答量：379

采纳率：100%

帮助的人：506万

我也去答题访问个人页

关注

展开全部

js里面调用body是,还没有生成body,所以调用不到,常见的解决方法有两个:
一:
把<script>....</script>放到</html>后面
二:
把<script></script>里面的代码放到一个页面加载方法里面:
<scritp>
window.onload=function()
{
//原来的代码发到这里面
}
//////////
还有:
p.style.backgroundImage=" URL(13_2.jpg)" // 设置背景图片
这里写死了,就不会变化了
本意应该是
p.style.backgroundImage=ss
吧
////////////////////
另外数组少申请了一位,bg = new Array(); 就可以了
</script>

更多追问追答

追问

document.getElementsByTagName('body')[0]为什么后面要加一个【0】？？？
body中第一个控件就是图片吗？

追答

document.getElementsByTagName('body')是获得所有的body元素,虽然就一个,但这样获得的还是数组,所以,取第一个body就要用[0]了,你可以根据方法名看出来,getElements,是复数形式
如果是getElementById,这个就是Element,后面没有s,就是获得单一的原件,而不是获得原件数组
因为标准的html中id是唯一的,而TagName相同的却很多,比如table中会有多个td.

本回答被提问者采纳

已赞过 已踩过<

评论收起

博思aippt
2024-07-20 广告

博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生... 点击进入详情页

本回答由博思aippt提供

灰人王
2011-07-12 · TA获得超过2456个赞

知道大有可为答主

回答量：2401

采纳率：0%

帮助的人：896万

我也去答题访问个人页

关注

展开全部

bg = new Array(2);
bg[0] = '13_3_1.jpg'
bg[1] = '13_3_2.jpg'
bg[2] = '13_3_3.jpg'

你的数组长度只有2，怎么能放入3个数据呢？

已赞过 已踩过<

评论收起

wang_haipeng12
2011-07-12 · 超过55用户采纳过TA的回答

知道答主

回答量：333

采纳率：0%

帮助的人：316万

我也去答题访问个人页

关注

展开全部

<body id="a" style="background:red" >
<script language="javascript">
function ChangeBgColor(colorIndex)
{
var dombody = document.getElementById("a");
if (dombody == null)
{
return;
}
else
{
switch (colorIndex)
{
case 1:
dombody.style.background="#666666";
break;
case 2:
dombody.style.background="#003333";
break;
case 3:
dombody.style.background="#ccccff";
break;
case 4:
dombody.style.background="#6699cc";
break;
default:
dombody.style.background="white";
break;
}
}
}
</script>
<div style="width:100px;height:20px;text-align:center;background-color:#666666;" onclick="return ChangeBgColor(1)"></div>
<div style="width:100px;height:20px;text-align:center;background-color:#003333;" onclick="return ChangeBgColor(2)"></div>
<div style="width:100px;height:20px;text-align:center;background-color:#ccccff;" onclick="return ChangeBgColor(3)"></div>
<div style="width:100px;height:20px;text-align:center;background-color:#6699cc;" onclick="return ChangeBgColor(4)"></div>
</body>