一、三大家族区别(三大家族总结)
(1)Width和height
clientWidth = width + padding (盒子调用)
clientHeight = height + padding
offsetWidth = width + padding + border (盒子调用)
offsetHeight = height + padding + border
scrollWidth = 盒子(div)中(文本)内容宽度(不包含border) (盒子调用)
scrollHeight = 盒子(div)中(文本)内容高度(不包含border)
(2)top和left
1. offsetTop/offsetLeft :在带有定位属性的父系盒子中的距离。调用者:任意元素。(盒子为主)
2. scrollTop/scrollLeft: 浏览器无法显示的部分(被卷去部分的大小)。(盒子也可以调用,必须有滚动条) 调用者:document.body.scrollTop/.....(window)
3. clientTop/clientLeft 指的是(上、左)border的宽度(粗细) (盒子调用)
二、event事件的属性
clientY/clientX: 鼠标在浏览器可视区域的位置。 调用者:event event.clientX
pageX/pageY: 鼠标在整个页面中的位置 调用者:event
screenX/screenY: 鼠标在屏幕(显示器)中的位置 调用者:event
获得屏幕(显示器)宽高: window.screen.width
JavaScript 三大家族区别(offset/scroll/client)
最新推荐文章于 2023-03-08 16:43:02 发布