Question

我希望div2的上边距等于div1的高度，使用javascript（无论高度多少），而且div2可见。

＆＃13;

.div1{
  width:50%;
  height:100px;
  position:absolute;
  top:0;
  left:0;
  background-color:red;
}
.div2{
   width:50%;
  height:100px;
   background-color:blue;
 }

＆＃13;

<div class="div1">
  
 </div>
<div class="div2">
  
  </div>

＆＃13;

Answer 1

也许是这样的：

var div1Height = document.getElementsByClassName("div1")[0].style.height;
document.getElementsByClassName("div2")[0].style.margin = div1Height;

我发现MDN很有帮助（提示：尝试花时间去学习语言）。

Answer 2

您可以使用包含大量功能的jQuery，以便编写更少的代码。

document.getElementById('.div2').style.marginTop = document.getElementById('.div2').style.height;

您还可以使用clientHeight或offsetHeight等属性：

`clientHeight` includes padding.

offsetHeight包括填充，滚动条和边框。

你这样做：

document.getElementById('myDiv').offsetHeight;

Answer 3

//If you use jquery then you can write code as follows.

$(document).ready(function(){

var height_of_div1 = $(".div1").css('height'); // Best way will be if you use id rather than class for this div

$(".div2").css('margin-top',height_of_div1);

});`

Answer 4

我是通过使用clientHeight

完成的

http://codepen.io/anon/pen/JRoqVX

<style>
.div1{
  width:50%;
  height:100px;
  position:absolute;
  top:0;
  left:0;
  background-color:red;
}
.div2{
   width:50%;
  height:100px;
   background-color:blue;
 }
</style>
<div class="div1">
  test 1
 </div>
<div class="div2">
  test 2
  </div>
<div onclick="test()">Test</div>
<script>
function test() {
  var div2 = document.querySelector(".div2");
  var div1 = document.querySelector(".div2");

  div2.style.marginTop = div1.clientHeight + "px";
}
</script>

Answer 5

我建议你对这些元素使用id，否则如果你想用元素组做这样的事情，只需使用foreach循环。

var h = document.getElementsByClassName("div1")[0].offsetHeight;
document.getElementsByClassName("div2")[0].style.topMargin = h+"px";

Answer 6

您在这里！

window.onload = () => {
    document.querySelector('.div2').style.marginTop = `${document.querySelector(".div1").offsetHeight}px`;
  }

如何使用JavaScript将一个元素的边距设置为等于其他元素的高度？

6 个答案: