1. 程式人生 > 實用技巧 >DOM-獲取元素大小和位置

DOM-獲取元素大小和位置

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)