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
}

或者就像我想的那样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

切换OnClick以动态更改CSS

1 个答案: