记录学习前端知识的旅程【2】

又是新的一天到来，每天学习一点前端小知识。

今天学习了几个关于pc端特效的属性。
 

1、offset系列属性

offsetLeft  可以动态获取元素距离父元素左边框的偏移量。//父元素需带有定位，如果父元素没有定位则相对于body偏移

offsetTop 可以动态获取元素距离父元素上边框的偏移量。//父元素需带有定位，如果父元素没有定位则相对于body偏移

offsetWidth  获取自身的宽度包括padding、border、内容，返回值不带单位。

offsetHeight  获取自身的高度包括padding、border、内容，返回值不带单位。

 

2、client系列属性

clientLeft   获取自身的左边框大小

clientTop  获取自身的上边框大小

clientWidth     与offsetWidth的区别 ：获取自身宽度不包含边框，返回值不带单位。

clientHeight   与offsetWidth的区别 ：获取自身宽度不包含边框，返回值不带单位。

 

3、scroll系列属性

scrollHeight  获取元素的实际高度大小（内容的大小），不包含边框

scrollWidth  获取元素的实际宽度大小（内容的大小），不包含边框

scrollTop 获取元素顶部被卷去的距离

 

用了这几个属性做了一个小案例，鼠标移上去，右边会出现放大的效果

中间的小黄框会跟着鼠标移动，右边的图片也会跟着鼠标移动。

补充：

e.pageX获取鼠标距离页面左边的大小   //相对于页面，不是游览器窗口

e.pageY获取鼠标距离页面顶部的大小   相对于页面，不是游览器窗口

哈哈，好了，今天就写到这吧