DOM-獲取元素大小和位置
阿新 • • 發佈:2021-01-11
DOM提供了幾個屬性用來獲取元素大小 - 數字
clientWidth clientHeight - 不包含邊框的大小var box = document.querySelector(".box"); var w = box.clientWidth; var h = box.clientHeight; console.log(w,h);offsetWidth offsetHeight - 包含邊框的大小
var w1 = box.offsetWidth; var h1 = box.offsetHeight; console.log(w1,h1);
獲取位置
offsetLeft offsetTop - 數字var small = document.querySelector(".small"); var l = small.offsetLeft; var t = small.offsetTop; console.log(l,t);var l1 = window.getComputedStyle(small).left var t1 = window.getComputedStyle(small).top console.log(l1,t1); 如果自己和父元素都沒有設定過定位,獲取到的是相對於瀏覽器的位置 父元素沒有設定過定位,自己設定了定位,獲取到的是相對於瀏覽器的位置
//或者
如果父元素設定過定位,自己也設定過定位,獲取到的是相對於父元素的位置 如果父元素設定過定位,自己沒有設定過定位,獲取到的是相對於父元素的位置
獲取的是自己相對於設定過定位的父元素的位置,找到html - 獲取位置 父元素設定過定位,相對於父元素
做一個直線掉落的div
var box = document.querySelector(".box"); setInterval(function(){ // 獲取top var t = box.offsetTop; // 加大 t += 1 // 設定給top box.style.top = t + "px" },10)