用JS控制边框高度

Control border height with JS

本文关键字：高度 边框 控制 JS      更新时间：2023-09-26

我有两个div在彼此的顶部:#header-menu和下面是#banner。两者都横跨#body的整个宽度。

它们都有a {border-bottom:5px}。但是当#banner是空的(我只在某些页面上放东西)，那么#header-menu上的border-bottom将是5px + #banner边界的5px，这会破坏设计。

我的问题是，如果我使用JS和CSS可以拿走#banner的边界，如果#banner是小于5px的高度?如果有，那么该怎么做呢?

我在Drupal 7上，我可以在php中这样做，当#banner是空的，然后会有边界?

这是你要求做的

$(".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属性设置为none。然而，我建议，如果它是空的，它是一个毫无意义的html元素，所以最好是删除它，像这样:

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

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

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

但是我建议你使用一些服务器端代码，如果div是空的，就不输出html。

相关文章：