设置 div 标签的背景大小无法使用 Javascript

Question

我需要在动画播放期间更改背景图像的大小，但它不起作用。

这是我的代码的简单版本：

document.querySelector("#Box").backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

  <div id="Box"></div>

Answer 1

您应该定位 .style

document.querySelector("#Box").style.backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

  <div id="Box"></div>

Answer 2

您在查询选择器中缺少 .style 声明

document.querySelector("#Box").style.backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

<div id="Box"></div>

Answer 3

您的 js 中缺少 style...

document.querySelector("#Box").style.backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

<div id="Box"></div>

Answer 4

#Box 元素没有 backgroundSize 属性。你应该只参考它的样式属性然后参考 backgroundSize

document.querySelector("#Box").style.backgroundSize = 'cover'

设置 div 标签的背景大小无法使用 Javascript

setting the background Size of div tag not working using Javascript

html

javascript

css

background-size