Javascript检查CSS是否显示div

Question

Right now, i have a div and i did an inline style, display:none. 现在，我有一个div，并且进行了内联样式display：none。 When the user click a button, it will call a javascript function and change the div display to according value. 当用户单击按钮时，它将调用javascript函数并将div显示更改为相应的值。 However, how can i do such check as they kept returning display:none even when in actual, display is block. 但是，我怎么做这样的检查，因为他们一直返回display：none，即使实际上，显示是阻塞的。 Here is my javascript code 这是我的JavaScript代码

function unhideDiv(){
var divDOC=document.querySelector('divContent');
var result = document.getComputedStyle(divDOC, '').display;
if(result=='none'){
divDOC.style.display="block";
}
else
{
divDOC.style.display="none";
}

}

Here is my html code 这是我的HTML代码

    <div id="divContent" style="display:none;" >
    </div>
<button onclick="unhideDiv()">Click This </button>

Your help will be much appreciated. 您的帮助将不胜感激。 Thanks in advance! 提前致谢！

Answer 1

It's a lot easier to give the element a class that will hide it, then just toggle the class. 给元素一个隐藏它的类要容易得多，然后只需切换该类即可。

 .hide { display: none; }

 <button onclick="toggleHide()">Click This</button> <div id="divContent" class="hide">div</div> <script> function toggleHide() { document.getElementById('divContent').classList.toggle('hide'); } </script>

Answer 2

Make sure you're targeting the correct element with your querySelector method: 确保使用querySelector方法定位正确的元素：

var divDOC = document.querySelector("#divContent");

Also, the command to get the computedStyle is window.getComputedStyle() 另外，用于获取计算window.getComputedStyle()的命令是window.getComputedStyle()

So your code would be something like this: 因此，您的代码将如下所示：

function unhideDiv(){
    var divDOC=document.querySelector('#divContent');
    var result = window.getComputedStyle(divDOC, '').display;
    if(result=='none'){
        divDOC.style.display="block";
    }
    else
    {
        divDOC.style.display="none";
    }
}

Answer 3

I like this solution: 我喜欢这个解决方案：

 // external.js var doc, E; // reuse on other loads addEventListener('load', function(){ doc = document; E = function(id){ // super easy return doc.getElementById(id); } var bS = E('box').style, d = 1; E('butt').addEventListener('click', function(){ if(d){ bS.display = 'none'; d = 0; } else{ bS.display = 'block'; d = 1; } }); });

 /* external.css */ html,body{ padding:0; margin:0; } .main{ width:980px; margin:0 auto; } #box{ width:100px; height:100px; background:orange }

 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8' /> <link type='text/css' rel='stylesheet' href='external.css' /> <script type='text/javascript' src='external.js'></script> </head> <body> <div class='main'> <div id='box'>test box</div> <input type='button' id='butt' value='change display' /> </div> </body> </html>

Javascript检查CSS是否显示div

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-02-02 01:15:39

解决方案2
0 2017-02-02 01:14:39

解决方案3
0 2017-02-02 01:55:16

Javascript检查CSS是否显示div

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-02-02 01:15:39

解决方案2 0 2017-02-02 01:14:39

解决方案3 0 2017-02-02 01:55:16

解决方案1
1 已采纳 2017-02-02 01:15:39

解决方案2
0 2017-02-02 01:14:39

解决方案3
0 2017-02-02 01:55:16