获取元素高度，并将这个高度赋值给另外的CSS属性

最近在做公司网站，美工做了个效果图，为了追求效果，将banner下的图片向上移动一半，压在banner上，如图：

由于是响应式的缘故，就不能将magin-top（bottom）的值写死，我就在想可不可以获取这个div的高度，然后将这个高度值的一半赋值给magin-top（bottom）。

首先想到的是get.attribute与set.attribute以及getComputedStyle()。在一顿乱踩坑之后，发现不能很理想的获取height属性。直到我发现了offsetHeight！！！

在文档上扒下来的：

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 

这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 element.getBoundingClientRect()

语法：var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

所以接下来就很简单啦:

<div id="app" class="pic-header">
      <ul  class="float-up" >
    <li><img src=".." alt=""></li>
    <li><img src=".." alt=""></li>
    <li><img src=".." alt=""></li>
    <li><img src=".." alt=""></li>
    <li><img src=".." alt=""></li>
    <li><img src=".." alt=""></li>
  </ul>
    </div>
<script>
    var intElemOffsetHeight = document.getElementById("app").offsetHeight;
        alert(intElemOffsetHeight);
        app.style.marginTop=-intElemOffsetHeight / 2 +"px";
    </script>

小白的成长之路，为美好的明天献上祝福。