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次

---

究竟是什么原因导致了这种情况？

此代码可以按照您的意愿工作（如果不更新，背景将是灰色占位符）。图像质量很差，因为我要求它只有120px的正方形

我还更改了

.myMainDiv

的高度，以确保其高度大于占位符，并设置

宽度：120px

确保占位符垂直重复，如果

背景重复：无重复不起作用

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


cssAllStyles=“最小高度：100vh；背景颜色：#000000；背景位置：中心；背景重复：无重复；背景大小：封面；背景附件：固定；”
var elements=document.getElementsByClassName（'myMainDiv'）；
var requiredElement=元素[0]；
requireDelete.style.cssText=cssAllStyles+“背景图像：url（'https://placeimg.com/120/120/any')";
.myMainDiv{
宽度：120px；
高度：300px；
背景图像：url（''https://via.placeholder.com/150');
}
你能分享可复制的代码吗？在你的css规则中，它包含了不可重复的代码，你需要将其添加到js中。这看起来不错，但我看不出我的做法与你有什么不同。这可能取决于你如何定义
这个
，但你还没有提供那部分代码……试着使用我提供的代码，看看它是否有效使用你的代码。是的，当我没有做任何太复杂的事情时，它可以工作，但是当我把它放在我的代码中时，有点复杂，它就出了问题。不过谢谢你的帮助。结果是@nightons2在OP的评论中是正确的。我必须单独重置所有类的内容，例如
requiredElement.style.backgroundRepeat=“no repeat";你知道有没有快速重置所有这些的方法？我尝试了
requiredElement.className=requiredElement.className
但这不起作用。是的，您可以将样式存储在字符串中，然后将其应用于元素的
cssText
。我保留了
背景图像
的值，以防需要更改。显然，如果愿意，可以将其中一些值移动到样式中。