切换 OnClick 以动态更改 CSS

Question

我有一个按钮可以通过使用 onClick 按钮调用 CSS 样式表更改来显示和隐藏特定部分。我想要相同的 onclick 在隐藏和显示之间切换。它用 .HeaderContainer {display:none;} 隐藏了内容，但我可以得到如何切换它的帮助吗？如果再次单击我想要相同的按钮，那么它应该只用 {} 覆盖 .HeaderContainer ；

我已经把这样的代码隐藏起来了。我需要同一个按钮如何再次显示它。

<script type="text/javascript">
    function loadToggleAction() {
    var sheet = document.createElement('style')
    sheet.innerHTML = ".HeaderContainer {display:none;}";
    document.body.appendChild(sheet);
    }
  </script>
  <form>
    <input type="button" id="dxp" class="button"  value="Hide top Pane" onclick='javascript: loadToggleAction();' />
  </form>

Answer 1

你可以这样做：

var isHidden = false;

function loadToggleAction() {
    var sheet = document.createElement('style')
    if(!isHidden){
        sheet.innerHTML = ".HeaderContainer {display:none;}";
    }else{
        sheet.innerHTML = ".HeaderContainer {display:block;}";
    }
    document.body.appendChild(sheet);
    isHidden = !isHidden; //This will change the value to the opposite
}

或者像我想的那样：

 var isHidden = false;
 function toggleVisibility() {
    var div = document.getElementsByClassName("test")[0];
    if(!isHidden){
      div.style.display = "none";
    }else{
      div.style.display = "block";
    }
    isHidden = !isHidden;
}

.test {
  display: block;
  width: 100px;
  height: 100px;
  background: #ff0000;
}

<div class="test"></div>
<button onclick="toggleVisibility()">Click me</button>

切换 OnClick 以动态更改 CSS

Toggle OnClick to dynamically change CSS

javascript

onclick

toggle