隐藏div，如果div为空。

Question

隐藏div，如果div为空。

6

如何在 DIV（HEADER）为空时隐藏它？以下是我的 HTML 和样式，我尝试使用 HEADER:empty，但运行代码后 DIV 仍然存在。

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    width: 1080px;
    height: 1920px;
}

/* Start MAIN-grid-container */
.MAIN-grid-container {
    display: grid;
    grid-template-columns: 1080px;
    grid-template-rows: 100px 640px 300px 100px;
    grid-template-areas: "HEADER" "TOP" "MIDDLE" "FOOTER";
    margin: 0px 0px 0px 0px; /*top,right,bottom,left or auto for horizontal center*/
}

.MIDDLE { 
    grid-area: MIDDLE; 
    background-color:lightblue;
}

.FOOTER { 
    grid-area: FOOTER; 
    background-color:yellow;
}

.TOP { 
    grid-area: TOP; 
    background-color:red;
}

.HEADER { 
    grid-area: HEADER; 
    background-color:green;
}

.HEADER:empty { 
    grid-area: HEADER; 
    display: block;
}
/* End MAIN-grid-container */

</style>
</head>
<body>
<div class="MAIN-grid-container">
  <div class="HEADER"></div>
  <div class="TOP">
    <div class="SUB-TOP-grid-container">
      <div class="SUB-TOP-MAIN" id="WeatherContainer">
        <div class="SUB-TOP-MAIN-grid-container">
          <div class="SUB-TOP-MAIN-TIME">DATE AND TIME<br/><br/>hhfh</div>
          <div class="SUB-TOP-MAIN-CURRENT">CURRENT WEATHER</div>
        </div>
      </div>
      <div class="SUB-TOP-FORECAST">FORECAST test</div>
    </div>
  </div>
</div>
</body>
</html>

希望有人可以指导我，指明正确的方向。如您所见，标题DIV为空 - 但仍显示为绿色背景色。

更新正如一些人所写的那样，我可以添加这个并且它可以工作...

.HEADER-empty, .HEADER:empty, [class^=HEADER-]:empty { 
    grid-area: HEADER; 
    display: none;
}

但是我遇到了一个问题，当顶部div出现时，会覆盖在头部div上，这不是我想要的结果。如果头部为空，则隐藏该div并使顶部div占据顶部位置。

然后，我尝试使用以下样式来处理顶部类：

position: fixed;

但是我在TOP和MIDDLE div之间得到了一个白色区域，有人可以帮帮我吗？

- Thomas BP

使用 display:none; 或 visibility:hidden; - godfather

你如何“添加”标题的内容 - 答案取决于具体情况 :) - kukkuz

4个回答

6

:empty伪类选择器将选择包含空内容或仅HTML注释的元素。

div:empty {
  display: none;
}

更多细节请参考 https://css-tricks.com/almanac/selectors/e/empty/ 这可能会帮到你。

- Lakshmi C Raveendran

3

你可以使用JavaScript来实现这个功能……请看下面的例子。如果你在div里写点东西，它就会出现；如果你什么都不写，它就会消失。

var x = document.getElementById("HEADER");

if(x.innerHTML === ""){
    x.style.display = "none";
}
else{
  x.style.display = "block";
}

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    width: 1080px;
    height: 1920px;
}

/* Start MAIN-grid-container */
.MAIN-grid-container {
    display: grid;
    grid-template-columns: 1080px;
    grid-template-rows: 100px 640px 300px 100px;
    grid-template-areas: "HEADER" "TOP" "MIDDLE" "FOOTER";
    margin: 0px 0px 0px 0px; /*top,right,bottom,left or auto for horizontal center*/
}

.MIDDLE { 
    grid-area: MIDDLE; 
    background-color:lightblue;
}

.FOOTER { 
    grid-area: FOOTER; 
    background-color:yellow;
}

.TOP { 
    grid-area: TOP; 
    background-color:red;
}

.HEADER { 
    grid-area: HEADER; 
    background-color:green;
}

.HEADER:empty { 
    grid-area: HEADER; 
    display: block;
}
/* End MAIN-grid-container */

</style>
</head>
<body>
<div class="MAIN-grid-container">
  <div class="HEADER" id="HEADER"></div>
  <div class="TOP">
    <div class="SUB-TOP-grid-container">
      <div class="SUB-TOP-MAIN" id="WeatherContainer">
        <div class="SUB-TOP-MAIN-grid-container">
          <div class="SUB-TOP-MAIN-TIME">DATE AND TIME<br/><br/>hhfh</div>
          <div class="SUB-TOP-MAIN-CURRENT">CURRENT WEATHER</div>
        </div>
      </div>
      <div class="SUB-TOP-FORECAST">FORECAST test</div>
    </div>
  </div>
</div>
</body>
</html>

- mindmaster

1

你可以使用jQuery隐藏空的DIV。假设你有这些DIV。

<div class="item"></div>
<div class="item">some text</div>

简单使用jQuery的方法如下：

$('div.item:empty').hide();

在您的情况下

$('div.HEADER:empty').hide();

所有空的 DIV 将会隐藏，如果它们是空的。

有关 jQuery :empty 选择器的更多详细信息。

- Gufran Hasan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Az. · Accepted Answer

无需JS - 只需在此CSS声明块中更改display属性的值：

.HEADER:empty { 
    grid-area: HEADER; 
    display: none;
}

看一下这个代码片段：https://jsfiddle.net/j8avxm1k/

如果你在 div.HEADER 中输入或放置任何内容，它将再次可见。

编辑

个人而言，我更喜欢使用传统的 "float" 属性，而不是使用这种 "重新发明轮子" 的方法。尽管如此，为了回答您在评论中提出的问题：

重置 grid-template-rows 属性并在 .HEADER 的声明中将高度设置为所需大小，像这样：

.MAIN-grid-container {
/* ... */
grid-template-rows: auto 640px 300px 100px;
/* ... */
}

.HEADER { 
/* ... */
height: 100px;
/* ... */
}