Javascript中經常使用寬高和座標屬性

時間 2019-12-04

原文原文鏈接

1.scrollHeight/Width

scrollHeight/Width是一個只讀的屬性，元素的內容高度/寬度，包括因爲overflow屬性而不可見的部分。不能直接從css中獲得。scrollHeight/Width的值除了內容高度/寬度，也包括padding值。
scrollWidth相似。
css

2.scrollTop/Left

以scrollLeft爲例：
scrollLeft屬性可以獲得或者設置元素滾動到左邊的像素值。注意(rtl和ltr會不一樣)html

假如element不可以scroll的時候，好比沒有設置overflow屬性。scrollLeft會被重置爲0，無論你設置什麼值，都不會有什麼效果。（這也是不少scrollLeft失效的緣由）瀏覽器
設置的值小於0，重置爲0性能
設置的值超過內容容許滾動的最大值，重置爲最大值。ui

注意事項：scrollLeft屬性是應用在父元素上面，而不是子元素。
其它scrollTop與scrollLeft相似。this

3. offsetHeight/Width

offsetHeight/Width是一個只讀屬性，返回一個元素的結構寬度，包括元素的border和padding、滾動條(若是存在的話)和css設置的高度/寬度。spa

4.offsetTop/Left

以offsetLeft爲例, 返回當前元素左上角相對於HTMLElement.offsetParent節點的左邊界偏移的像素值。指針

HTMLElement.offsetParent:一個只讀屬性，返回一個指向最近的包含該元素的定位元素。若是沒有定位的元素，則 offsetParent 爲最近的 table 元素或根元素（標準模式下爲 html；quirks 模式下爲 body）。當元素的 style.display 設置爲 "none" 時，offsetParent 返回 null。offsetParent 頗有用，由於 offsetTop 和 offsetLeft 都是相對於其內邊距邊界的。code

例如：htm

<div style="width: 300px; border-color:blue;
  border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="long">Long span that wraps within this div.</span>
</div>

<div id="box" style="position: absolute; border-color: red;
  border-width: 1; border-style: solid; z-index: 10">
</div>

<script>
  var box = document.getElementById("box");
  var long = document.getElementById("long");
  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = long.offsetTop + document.body.scrollTop + "px";
  box.style.width = long.offsetWidth + "px";
  box.style.height = long.offsetHeight + "px";
   console.log(long.offsetParent) //offsetParent爲body
</script>

offsetTop 相似的道理。