javascript - 用JS控制边框高度

Question

我有两个 Div:#header-menu，下面是 #banner。两者都跨越了 #body 的整个宽度。

他们都有一个{border-bottom:5px}。但是当 #banner 为空时(我只在某些页面上放东西)然后 #header-menu 上的 border-bottom 将是5px + #banner 边框的 5px 会破坏设计。

我的问题是，如果 #banner 高度小于 5px，我是否可以通过使用 JS 和 CSS 去除 #banner 的边框？如果可以，那该怎么做呢？

我在 Drupal 7 上，我可以在 php 中做到这一点，所以当 #banner 为空时会有边框吗？

Answer 1

这就是你要求做的

$(".banner").each(function(){
  if( $(this).height() < 5){
    $(this).remove();
  }
});

或者:

$(".banner").each(function(){
  if( $(this).html() == ''){
    $(this).css('border-bottom', 'none');
  }
});

对于页面上的每个横幅，阅读它的 html。如果 html 为空，则将横幅的 css border-bottom 属性设置为无。但是，我建议如果它是空的，它是一个毫无意义的 html 元素，那么最好是像这样删除它:

$(".banner").each(function(){
  if( $(this).html() == ''){
    $(this).remove();
  }
});

(这里我使用了 .banner 而不是 #banner)

http://codepen.io/EightArmsHQ/pen/qNQwOQ

但是，如果 div 将为空，我建议您使用某种服务器端代码来不输出 html。