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

回答

相关问题