放大鏡功能準備工作
知識點
網頁被卷起來的高度/寬度(即瀏覽器滾動條滾動後隱藏的頁面內容高度)
document.documentElement.scrollTop和document.documentElement.scrollLeft
網頁工作區域的高度和寬度
document.documentElement.clientHeight和document.documentElement.clientWidth
元素距離文檔頂端和左邊的偏移值
DOM元素對象.offsetTop和 DOM元素對象.offsetLeft
其中對於偏移量的屬性:
- offsetParent:當前對象的上級層對象
- offsetTop:當前對象到其上層頂部(offsetParent)的距離,不能賦值,如果需要設置對象到頁面頂部的距離要用style.top (offsetLeft同理)
offsetWidth:當前對象的寬度 offsetHeight:當前對象的高度
它與style.width的區別是: 如果寬度為百分比時, style.width返回的是百分比,而offsetWidth返回的是具體的數值 (offsetHeight同理)
獲取網頁元素的絕對位置:
javascript getElementTop(element) { var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null) { actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; }
`getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}`
放大鏡功能準備工作