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)