0

我的代码似乎在 Firefox 上运行完美。但是当我想在 IE 或 Chrome 上运行它时，我的背景似乎是空白的。我的代码有问题吗？还是我测试过的浏览器根本不支持它？

<html>
<head>
    <script>
    window.onload = function () {
     var imgs = [
        'images/1.jpg',
        'images/2.jpg',
        'images/3.jpg',
        'images/4.jpg',
        'images/5.jpg',
        'images/6.jpg'
     ];
     document.body.style = 'background: url(' + imgs[Math.round(Math.random() * imgs.length)] + ') no-repeat ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';
    }
    </script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <?php include ("header.php"); ?>
    <div align="center" >
        <?php include ("main.php"); ?>
        <?php include ("footer.php"); ?>
    </div>
</body>

4

3 回答 3

3

你的语法是错误的。它应该是：

var body = document.body;
body.style.background = 'url(' + imgs[Math.round(Math.random() * imgs.length)] + ') no-repeat';
body.style.webkitBackgroundSize = 'cover';

http://jsfiddle.net/CGsxB/

一次将一堆属性设置为字符串可能在 Firefox 中有效，但通常您应该单独设置单独的样式属性。

于 2013-07-06T12:25:05.803 回答
0

像这样试试

<script>
function my_function() {
 var imgs = [
    'images/1.jpg',
    'images/2.jpg',
    'images/3.jpg',
    'images/4.jpg',
    'images/5.jpg',
    'images/6.jpg' ];
 document.body.style = 'background: url(' + imgs[Math.round(Math.random() * imgs.length)] + ') no-repeat ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';

 //also you can try like
    document.getElementByTagName('body').style = 'background: url(' + imgs[Math.round(Math.random() * imgs.length)] + ') no-repeat ; 
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';
}
  my_function();   //Just call this 
</script>

它将my_function()在每个页面加载时调用。因为window.onload 可能不支持所有浏览器及其版本

于 2013-07-06T12:20:09.803 回答
0

用起来不是更好style.cssText吗？

document.body.style.cssText = 'background: url(' + imgs[Math.floor(Math.random() * imgs.length)] + ') no-repeat ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';

此外，似乎Math.round(Math.random() * imgs.length)有时会产生imgs.length结果并超出数组边界，所以我建议Math.floor改为。

于 2013-07-06T12:39:40.703 回答