使用JavaScript修改Div背景图后显示异常过大的问题求助

我正在开发一个简单的HTML、JS项目，需求是通过点击按钮，使用JavaScript修改Div的背景图。目前已完成图片切换功能，但切换后的图片显示异常过大，必须缩小浏览器才能完整查看，求解决方法。

相关代码如下：

JavaScript代码 #

var btn = document.getElementById('submit');

if (btn) {
  btn.addEventListener('click', func);
}

function func() {
  var element = document.getElementById("updateImage");
  element.style.background = "url(https://freepngimg.com/thumb/star/22-star-png-image.png)"
}

CSS代码 #

.solar {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/1235px-Red_star.svg.png') center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  position: static;
  animation: spin 25s linear infinite;
  width: 50vw;
  height: 50vw;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png');
}

/*.shadow { 
             animation: rainbow 2s linear infinite; 
             } */

HTML代码 #

<div>
  <input type="submit" id="submit" value="Click Meeeeeeee" style="float: left;background-color:#04AA6D;color:white" />

  <div class="middle">
    <h1 style="color:white;">Host name</h1>
    <hr>
    <p style="color:white;">Windows</p>
  </div>
</div>

<div class="solar" id="updateImage"></div>

<script type="text/javascript" src="client.js" charset="utf-8"></script>

解决方法 #

问题根源：通过JS设置element.style.background时，会覆盖CSS中原本定义的background-size、background-position、background-repeat等属性，导致新图片失去自适应容器的规则，直接以原始尺寸显示，所以显得过大。

方案一：单独修改背景图地址（推荐） #

只修改backgroundImage属性，不替换整个background样式，保留CSS中已配置的所有背景相关规则：

function func() {
  var element = document.getElementById("updateImage");
  element.style.backgroundImage = "url(https://freepngimg.com/thumb/star/22-star-png-image.png)";
}

方案二：补全所有背景样式 #

如果一定要使用background属性，需要把初始CSS中的背景配置全部补全，确保新图片和原图片的显示规则一致：

function func() {
  var element = document.getElementById("updateImage");
  element.style.background = "url(https://freepngimg.com/thumb/star/22-star-png-image.png) center center no-repeat cover";
}

内容的提问来源于stack exchange，提问作者John Seen