想用JS做炫酷的特效,你得先知道这些!!!

特效 (必备的一些知识点)

想用JS做炫酷的特效,你得先知道这些!!!_第1张图片

偏移量

  • offsetParent用于获取定位的父级元素
  • offsetParent和parentNode的区别
var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

想用JS做炫酷的特效,你得先知道这些!!!_第2张图片

客户区大小

var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);

想用JS做炫酷的特效,你得先知道这些!!!_第3张图片

滚动偏移

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)

想用JS做炫酷的特效,你得先知道这些!!!_第4张图片

你可能感兴趣的:(学习笔记,js,javascript,css,css3,前端)