clientX、offsetX、screenX、pageX、x的区别

 

鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

来源：https://blog.csdn.net/weixin_41342585/article/details/80659736

图片来源：https://www.cnblogs.com/deerfig/p/6432683.html

　　　　　// content
        $('.demo1').width()
        // content+padding
        $('.demo1').innerWidth();//200+100*2
        // content+padding+border
        $('.demo1').outerWidth();//200+100*2+5*2
        // content+padding+border+margin
        $('.demo1').outerWidth(true);//200+100*2+5*2+5*2
height同理。
一下图片转自：https://www.imooc.com/article/17571

"clientHeight": content + padding,(注：对于inline的元素这个属性一直是0，单位px，只读元素。)

"offsetHeight": content + padding + border + 水平滚动条宽度,（对于inline的元素这个属性一直是0，单位px，只读元素。）

"scrollHeight": 

"scrollTop": 

 "offsetTop"

 

网页可见区域高：document.body.clientHeight

网页正文全文高：document.body.scrollHeight
网页可见区域高（包括边线的高）：document.body.offsetHeight
网页被卷去的高：document.body.scrollTop

屏幕分辨率高：window.screen.height