如何使用 localhost 在页面刷新时交换背景图像？答案

【问题标题】：How do I swap a background image on page refresh using localhost?如何使用 localhost 在页面刷新时交换背景图像？
【发布时间】：2011-04-03 20:01:10
【问题描述】：

我需要能够在页面刷新时交换背景图像。我正在尝试使用 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%;
    }

这应该有效吗？我究竟做错了什么？！希望有人能帮忙！！

【问题讨论】：

你能详细说明“不工作”吗？你的浏览器崩溃了？没有图片出现？总是出现同一个？
Background-image 是一个 CSS 声明，而不是像“src”这样的 HTML 属性。你会想看看document.getElementById("home_style").style['backgroundImage']。
图片没有显示在我的本地主机上...根本没有！！
感谢马特向我解释为什么会发生这种情况！感谢大家如此迅速地提供帮助！

标签： javascript image random background

【解决方案1】：

这应该可行：

document.getElementById("home_style").style.backgroundImage = "url(" + myPix[randomNum] + ")";

【讨论】：