三大家族,offset,scroll,client

时间:2023-10-31 20:24:32

1.client

1.1主要成员

  1.clientWidth 获取网页可视区域宽度(两种用法)

     clientHeight 获取网页可视区域高度 (两张用法)

  

  盒子调用: 指盒子本省

  浏览器调用:可视区域大小。

  2.clientX  鼠标距离可视区域左侧的距离(event调用)

   clientY 鼠标距离可视区域上侧的距离(event 调用)

2.三大家族的区别

2.1Width 和 Height

clientWidth = width +padding

clientheight = height+ padding

offsetWidth = width + padding +border

offsetHeight = height + padding + border

scrollWidth = 内容宽度(不包含border)

scrollHeight = 内容高度(不包含border)

2.2top和left

offsetTop/offsetLeft :

调用者:任意元素。(盒子为主)

嘛作用:距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:

调用者:document.body.scrollTop/.....(window)

嘛作用:浏览器无法显示的部分(被卷去的部分)。

clientY/clientX:

调用者:event.clientX(event)

嘛作用:鼠标距离浏览器可视区域的距离(左、上)。