我的 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 秒更改一次以使其像幻灯片一样。 (我会将我的图像 url 存储在一个数组中)。
最佳答案
背景图像并没有真正绑定(bind)到 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')
您只需更改上述复合的 URL 部分，其余部分保持原样。 如果图像太小，它可能会被拉伸(stretch)以覆盖整个屏幕。 因此，要获得良好的幻灯片放映效果，请确保所有图像的大小都相同。
关于javascript - 整页大小的背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30561815/