重要的javascript div背景颜色

Question

您好，我一直在尝试使用 javascript 更改某些 div 样式，它会更改样式，但是如果 div 显示更改为无并返回阻止，它会重置样式吗？我试图用 important 来解决这个问题，但似乎没有用？任何想法为什么会发生这种情况，或者是否有更好的方法可以实现我想要做的事情？

var Style = document.querySelectorAll('#mainui-features, #mainui-modes, #mainui-offers, #mainui-party, #mainui-play, #mainui-user, #mainui-settings');
for (var i = 0; i < Style.length; i++) {
  Style[i].style.borderRadius = '1em'; // standard
  Style[i].style.MozBorderRadius = '1em'; // Mozilla
  Style[i].style.WebkitBorderRadius = '1em'; // WebKitww
  Style[i].style.color = "#D35400";
  Style[i].style.border = "2px solid #D35400";
  Style[i].style.setProperty("background-image", "linear-gradient(to right, #92FE9D, #00C9FF)", "important");
}

Answer 1

你可以用一个类代替内联样式

var Style = document.querySelectorAll('#mainui-features, #mainui-modes, #mainui-offers, #mainui-party, #mainui-play, #mainui-user, #mainui-settings');
for (var i = 0; i < Style.length; i++) {
  Style[i].classList.add('styles')
}

function hide() {
  for (var i = 0; i < Style.length; i++) {
    Style[i].classList.add('hide')
  }
}

function show() {
  for (var i = 0; i < Style.length; i++) {
    Style[i].classList.remove('hide')
  }
}

.styles {
  border-radius: 1em;
  -moz-border-radius: 1em;
  color: #D35400;
  border: 2px solid #D35400;
  background-image: linear-gradient(to right, #92FE9D, #00C9FF)
}

.hide {
  display: none
}

<div id="mainui-features">1</div>
<div id="mainui-modes">2</div>
<div id="mainui-offers">3</div>
<div id="mainui-party">4</div>


<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>