切換OnClick動態更改CSS

我有一個按鈕，通過使用onClick按鈕調用CSS樣式表更改來顯示和隱藏某個部分。我想要在隱藏和顯示之間切換相同的onclick。它隱藏了.HeaderContainer {display:none;}的內容，但我可以獲得幫助如何切換它？我想要同樣的按鈕，如果再次點擊，那麼它應該重寫.HeaderContainer只是{};切換OnClick動態更改CSS

我已將這樣的代碼隱藏起來。我需要同一個按鈕如何再次顯示。

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

來源

2017-02-22 pauldx

使用** addClass（）和** **。removeClass **方法或**。toggleClass（）** –

完整示例是[here]（http://api.jquery.com/toggle類/） –

你可以做這樣的：

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>

來源

2017-02-22 20:14:54 NoLoHo

這工作..謝謝！ – pauldx

我得到這個代碼的一個小問題。垂直空間表示像素爲100px，我用這個顯示器獲得：沒有引起底部附加垂直空白。 – pauldx

這可能與您的其他CSS的TODO頁面上。正如你可以閱讀這裏有沒有空間分配給'display：none'的標籤http://stackoverflow.com/a/133064/5173585如果這回答你的問題，請將我的帖子標記爲答案，謝謝！ – NoLoHo

切換OnClick動態更改CSS

回答

相關問題