更改html标记本身的背景

Change background of html tag itself

本文关键字：背景 html 更改      更新时间：2023-09-26

如何更改此标记的背景？

Html

<!DOCTYPE html>
<html class="full" lang="en">

JS

    window.onload = function () {
       var fileNumber = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
       var imgContainer = document.getElementsByClassName("full");
   // It does not work...    
  imgContainer.style.background = "url('../images/' + fileNumber + '.jpg') no-repeat center center fixed";
    }

CSS

.full {
    background: url('../images/5.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

document.getElementsByClassName返回一个数组，因此需要使用：

imgContainer[0].style.background = "url('../images/" + fileNumber + ".jpg') no-repeat center center fixed";

您当前使用的document.getElementsByClassName()函数可以返回元素数组，因此您需要指定要更新的确切索引：

imgContainer[0].style.background = 'url("../images/' + fileNumber + '.jpg") no-repeat center center fixed';

或者，由于您直接针对html元素，您可能会使用document.documentElement，它应该指向它：

document.documentElement.style.background = 'url("../images/' + fileNumber + '.jpg") no-repeat center center fixed';
相关文章：