javascript - 如果 div 没有内容，javascript 隐藏 div

Question

由于客户要求，我无法使用 jquery。我正在使用下面的脚本来检查 div 是否为空，如果是则隐藏它。虽然不工作。有任何想法吗？

<style>     
#top
{
padding: 0;
height: 120px;
width: 820px;
float: left;
background: #cccccc;
}
</style>
        <script>
if( document.getElementById("top").innerHTML == "" )
{
   document.getElementById("top").style.display='none';
}
        </script>
        <div id="top">
        </div>

Answer 1

在script 后面移动div

<style>
    #top {
        padding: 0;
        height: 120px;
        width: 820px;
        float: left;
        background: #cccccc;
    }
</style>
<div id="top"></div>
<script>
    if (document.getElementById("top").innerHTML == "") {
        document.getElementById("top").style.display = 'none';
    }
</script>

检查这个小提琴：

• http://jsfiddle.net/kJcfY/

基于（有价值的）评论：

这是您尝试实现的功能的变体：（这将处理杂散的空白）

if (typeof (String.prototype.trim) === "undefined") {
    String.prototype.trim = function () {
        return String(this).replace(/^\s+|\s+$/g, '');
    };
}

$top = document.getElementById("top");
if ($top.innerHTML.trim() == "") {
    $top.style.display = 'none';
}

• http://jsfiddle.net/kJcfY/1/

Answer 2

您应该在比较它是否为空之前修剪 div 的内容。检查此代码

<script type="text/javascript">
if(document.getElementById("top").innerHTML.trim()=='')
{
   alert('hello');
   document.getElementById("top").style.display='none';
}
</script>

应该可以试试。。

Answer 3

看来您已经将结尾的div-Tag 移动到与开头的同一行。这是你的问题的一部分。

请尝试将空字符串与===运算符进行比较，它会为您节省一些麻烦。