我需要能够在页面刷新时交换背景图像。我正试图用javascript做到这一点,我引用了我为页面主体设置的id。以下是我到目前为止想到的,它似乎不起作用:
<script type="text/javascript">
window.onload = choosePic;
function choosePic() {
var myPix = new Array("/CoVPrototype/images/Homepage/skyline_bkgd_blue_fixed.jpg", "/CoVPrototype/images/AboutPage/about_bkgd.jpg", "/CoVPrototype/images/GovernmentPage/gov_bkgd.jpg", "/CoVPrototype/images/newsPage/news_bkgd.jpg", "/CoVPrototype/images/parkPage/park_bkgd.jpg", "/CoVPrototype/images/propertyPage/property_bkgd.jpg", "/CoVPrototype/images/enviroPage/enviro_bkgd.jpg", "/CoVPrototype/images/transportPage/transport_bkgd.jpg", "/CoVPrototype/images/businessPage/business_bkgd.jpg");
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("home_style").src = myPix[randomNum];
}
我在HTML中引用的标签是这样设置的(请注意,所有其他HTML标签都已应用…只是为了简洁,这里没有显示):
<body id="home_style">
</body>
最后,我的CSS是这样的:
body {
margin:0;
padding:0;
font-size:62.5%;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
body#home_style {
background:no-repeat bottom left fixed;
width:100%;
}
这应该工作吗?我做错了什么?!我希望有人能帮忙!!
应该可以:
document.getElementById("home_style").style.backgroundImage = "url(" + myPix[randomNum] + ")";