Javascript检查css是否显示div答案

【问题标题】：Javascript check css whether div displayJavascript检查css是否显示div
【发布时间】：2017-02-02 01:07:53
【问题描述】：

现在，我有一个 div，我做了一个内联样式，display:none。当用户单击一个按钮时，它将调用一个javascript函数并将div显示更改为相应的值。但是，我怎么能做这样的检查，因为他们一直返回 display:none 即使实际上显示是块。这是我的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";
}

}

这是我的html代码

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

您的帮助将不胜感激。提前致谢！

【问题讨论】：

只需使用 jQuery 的.toggle()。如果您想自己执行此操作，请使用变量来存储状态。在您的函数中，切换变量，然后根据其新值设置样式。
您应该打开浏览器控制台检查错误。 querySelector('divContent') 也应该是 querySelector('#divContent') 但既然你在这个问题中标记了 jQuery 为什么不直接使用 toggle()...？
如果您将Element.style.display 设置为您想要开始的内容，您将不必获得计算样式。或者想想 0 和 1。
@PHPglue 无论如何我可以解决这个问题吗？默认情况下，我希望隐藏 div。单击按钮后，它将设置显示为块。
@QCcccc 使用 window.getComputedStyle() 而不是 document.getComputedStyle() jsfiddle.net/r4t1b7ub

标签： javascript jquery html css

【解决方案1】：

给元素一个隐藏它的类要容易得多，然后只需切换类。

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

【讨论】：

【解决方案2】：

确保使用 querySelector 方法定位正确的元素：

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

另外，获取computedStyle的命令是window.getComputedStyle()

所以你的代码应该是这样的：

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";
    }
}

【讨论】：

您可能还希望在您的 div 中添加一些内容，以便您可以看到它何时可见和何时不可见。 <div id="divContent" style="display:none;" ><p>Visible</p></div>

【解决方案3】：

我喜欢这个解决方案：

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

【讨论】：