Toggle OnClickでCSSを動的に変更する

Question

onClickボタンでCSSスタイルシートの変更を呼び出すことで、特定の部分を表示したり非表示にするボタンがあります。同じonclickをhideとshowの間で切り替える必要があります。そしてそれは.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>