Toggle 동적으로 CSS를 변경하려면

Question

onClick 버튼을 사용하여 CSS 스타일 시트를 호출하여 특정 부분을 표시하거나 숨길 수있는 버튼이 있습니다. 같은 onclick이 숨기기와 표시 사이를 전환하기를 원합니다. 그리고 콘텐츠를 .HeaderContainer {display:none;}으로 숨기고 있지만 토글하는 방법에 대한 도움을받을 수 있습니까? 다시 버튼을 클릭하면 같은 버튼을 원한다. {}로 .HeaderContainer를 오버라이드해야한다.

나는 이렇게 숨겨진 코드를 만들었습니다. 같은 버튼이 이것을 다시 보여줄 수있는 방법이 필요합니다.

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 
} 

을 아니면 내가 그것을하는 방법 것 같은 :

<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 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>