Question

我的html页面有背景图片。我通过css样式设置它： -

html{ 
    margin-top:10px;
    background: url(xxxxx.jpg) no-repeat center center fixed; 
    background-size: cover;
}

我想知道如何从Javascript端动态更改它。

我尝试过类似的事情：

document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";

但这并没有改变图像。

如果不使用jQuery，我如何访问html元素并更改其bkImage，比如说每5秒就可以像幻灯片一样。（我将把我的图片网址存储在一个数组中）。

Answer 1

背景图片并非真正与html标签相关联，而是body标签。尝试：

body
{ 
  background-image: url(xxxxx.jpg); 
}

脚本：

document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";

如果按预期方式工作（您看到zzzzz.jpg，而不是xxxxx.jpg），那么您已准备好修复剩余的CSS代码。

编辑：测试了代码并修复了一个错误。您必须指定backgroundImage = "url('zzzzz.jpg')"，而不仅仅是我之前写过的文件名。

例如，这非常有效，您只需要两张图片（red.jpg和blue.jpg）：

<html>
  <head>
    <style>
      body
      { 
        background-image: url('red.jpg');
      }
    </style>
  </head>
  <body>
    <script>
      document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
    </script>
  </body>
</html>

编辑2：

CSS的其余部分不得更改，因此您仍然拥有：

body
{
  margin-top: 10px;
  background: url('xxxxx.jpg') no-repeat center center fixed;
  background-size: cover;
}

background属性是一个化合物：

  background: url('xxxxx.jpg') no-repeat center center fixed;
              ^                ^         ^      ^
              URL              R         H      V

  URL: the image url
  R: repetition
  H: horizontal alignment
  V: vertical alignment

使用

background-image: url('xxxxx.jpg')

您只需更改上述化合物的网址部分，其余部分保持不变。如果图像太小，可能会拉伸以覆盖整个屏幕。所以对于一个好的幻灯片放映，请确保所有图像都具有相同的大小。

Answer 2

要访问html元素，您可以使用document.documentElement：

document.documentElement.style.backgroundImage = "url('yyy.jpg')";

要每隔X秒更改一次，您可以使用setInterval()并将图像放在数组中。

整页背景图片

2 个答案: