在运行时间更改元素的 `backgroundImage` 会干扰 Class 属性

Question

我在运行时间更改了 div 的背景：

 this.style.backgroundImage = "url('./images/back.jpg')";

但是，之前 class 是在 css 中设置的：

.myMainDiv {width: 100%;height: 100%;min-height: 100vh;background-color: #000000;background-position: center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}

当我有一张更大的图片时，效果很好。但是，当我减小背景图片的尺寸以节省一点内存时，它会按应有的方式将图片完全拉伸到整个屏幕，但会在高度下重复图片 3 次。

到底是什么原因造成的？

Answer 1

此代码如您所愿（如果未更新，背景将是灰色占位符）。图片质量很差，因为我要求它只有 120 像素的正方形。

我还更改了 .myMainDiv 的高度以确保它的高度大于占位符，并设置 width: 120px; 以确保如果 background-repeat: no-repeat; 不是，占位符应垂直重复正在工作。

更新所有的样式都保存在一个字符串中，这样你就可以通过JS随时应用它。这将覆盖所有其他特定于该元素的 CSS 样式（但不是来自类等的样式），因此您需要小心一点。

cssAllStyles = "min-height: 100vh; background-color: #000000; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;"


var elements = document.getElementsByClassName('myMainDiv');
var requiredElement = elements[0];

requiredElement.style.cssText = cssAllStyles + "background-image: url('https://placeimg.com/120/120/any')";

.myMainDiv {
  width: 120px;
  height: 300px; 
  background-image: url('"https://via.placeholder.com/150');
 }

<div class="myMainDiv"></div>

在运行时间更改元素的 `backgroundImage` 会干扰 Class 属性

Changing an Element's `backgroundImage` at run time interferes with Class properties

html

javascript

background-image

在 运行 时间更改元素的 `backgroundImage` 会干扰 Class 属性

Changing an Element's `backgroundImage` at run time interferes with Class properties

html

javascript

background-image

在运行时间更改元素的 `backgroundImage` 会干扰 Class 属性