时间戳

首页 > 解决方案 > 在运行时更改元素的 `backgroundImage` 会干扰类属性

javascript - 在运行时更改元素的 `backgroundImage` 会干扰类属性

问题描述

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 次。

这到底是什么原因造成的？

标签： javascripthtmlbackground-image

解决方案

此代码可以按您的意愿工作（如果未更新，背景将是灰色占位符）。图像质量很差，因为我要求它只有 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>

推荐阅读