獲取元素高度，並將這個高度賦值給另外的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>

小白的成長之路，為美好的明天獻上祝福。