Question

嗨，我一直在尝试使用javascript更改某些divs样式，它会更改样式，但是如果divs显示更改为none并返回阻止它会重置样式？我试图用重要的方法修复此问题，但这似乎没有用？任何想法为什么会发生这种情况，或者是否有更好的方法可以实现我正在尝试的目标？

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>

Answer 2

不确定自己在做什么错，但是描述需求的方式可以正常工作。也许这会有所帮助。

我没有提供所有ID。

// Store all elements in an array
const elements = [...document.querySelectorAll("#mainui-features, #mainui-modes, #mainui-offers, #mainui-party")];

// Assign CSS values to each element in the array
elements.map( el => {
  el.style.borderRadius = "1em";
  el.style.color = "#D35400";
  el.style.border = "2px solid #D35400";
  el.style.backgroundImage = "linear-gradient(to right, #92FE9D, #00C9FF)";
});

// Assign display:none to each element
elements.map( el => el.style.display = "none" );

// And make them display:block again
elements.map( el => el.style.display = "block" );

div {
height: 1rem;
width: 3rem;
}

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

javascript div背景色与重要

2 个答案: