Question

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

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

但是，以前的类是在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>

在运行时更改Element的`backgroundImage`会干扰Class属性

1 个答案: