Question

我创建了一个带有附加小部件框的简化菜单栏。现在我想使用JavaScript在这两个类之间定义一个间距。 .menu和.widget之间的距离必须始终为100px。

如何使用JavaScript实现这一目标？

（我不想在CSS中使用填充，边距或顶部等属性）

.menu {
  background: black;
  height: 50px;
  width: 100%;
  color:red;
}
.widget {
  background: green;
  height: 100px;
  width: 100px;
  border-radius: 5px;
}

<div class="menu">Menu Bar</div>
<div class="widget">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>

Answer 1

如果是HTML

<div class="menu">Menu Bar</div>
<div class="widget">Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text</div>

你可以做点什么

var menu = document.getElementsByClassName("menu")[0];
var widget = document.getElementsByClassName("widget")[0];
var difference = widget.offsetTop - menu.offsetBottom ; 
if (difference > 100) {
   widget.style.top = (menu.offsetBottom + 100) + "px";
}

修改

您可能还想检查差异小于100的情况，或者首先检查零。

if (difference < 100) { widget.style.top = (menu.offsetBottom + 100) + "px"; }

JavaScript：定义两个类之间的距离

1 个答案: