scroll系列和offset系列 client系列 js

西瓜味白桃汽水

已于 2022-06-16 14:56:37 修改

阅读量117

点赞数 1

文章标签： javascript 前端 html

于 2021-04-13 18:49:42 首次发布

本文链接：https://blog.csdn.net/weixin_51109349/article/details/115675375

版权

屏幕大小

window.screen.width

可视区不包括滚动条

document.documentElement.clientWidth || document.body.clientWidth;

根节点html宽度
即offsetWidth=width+padding+border，不包括margin

document.documentElement.offsetWidth

获取html元素对象内容的实际宽度，页面大小。

document.documentElement.scrollWidth

获取文档

document

获取body

document.body是DOM对象里的body子节点，即 <body> 标签；

获取html


document.documentElement 是整个节点树的根节点root，即<html> 标签；

== 元素（比如某个div）距离可视区域顶部的距离 ==

Element.getBoundingClientRect().top

在这里插入图片描述

client系列

clientWidth：元素实际宽度 + padding左右内间距
clientHeight：元素实际宽度 + padding上下内间距
clientLeft / clientTop：左 / 上边框的宽度

offset系列

offsetWidth：元素实际宽度 + padding左右内间距 + 边框左右宽度（offsetWidth返回在不同页面中对象的宽度值）
offsetHeight：元素实际宽度 + padding上下内间距 + 边框左右宽度
（offsetHeight返回在不同页面中对象的高度值）
offsetLeft:当前对象到其上级定位层左边的距离，不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
.offsetTop :当前对象到其上级定位层顶部的距离.，不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

scroll系列

scrollWidth:元素中内容的实际的宽（没有边框），如果没有内容或内容不足就是元素的宽
scrollHeight:元素中内容的实际的高（没有边框），如果没有内容或内容不足就是元素的高
scrollTop：对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
scrollLeft：对象的最左边到对象在当前窗口显示的范围内的左边的距离．即是在出现了横向滚动条的情况下，滚动条拉动的距离．

区别
1、client系列不获取边框数值，offset会获取边框的数值；
2、以上两者获取到的数值都受元素被设置的宽高具体数值影响，如果在出现滚动条的情况下想获取元素内所有内容的实际高度，则使用scrollHeight；
3、scrollTop不仅可以获取元素被卷进去的高度，还可以手动设置其数值（如：dom.scrollTop = 200），使页面滚动到指定位置；
4、但滚动到指定位置最常用的方法是dom.scrollTo(x轴坐标, y轴坐标)，如：window.scrollTo(0, 300)

鼠标点击位置

screenX 鼠标相对于显示器屏幕左上角x轴的坐标 ;
screenY 鼠标相对于显示器屏幕左上角y轴的坐标 ;
clientX 鼠标相对于浏览器左上角x轴的坐标 ; 不随滚动条滚动而改变 ;
clientY 鼠标相对于浏览器左上角y轴的坐标 ; 不随滚动条滚动而改变 ;
pageX 鼠标相对于浏览器左上角x轴的坐标 ; 随滚动条滚动而改变 ;
pageY 鼠标相对于浏览器左上角y轴的坐标 ; 随滚动条滚动而改变 ;

offsetX 鼠标相对于事件源左上角X轴的坐标 ;
offsetY 鼠标相对于事件源左上角Y轴的坐标 ;

浏览器大小

window.screen.width  //屏幕大小

window.innerHeight/innerWidth  //浏览器窗口内高度，视觉视口

document.documentElement.clientWidth    //可视区不包滚动条，布局视口

document.documentElement.offsetWidth         //html大小，不包margin

document.documentElement.scrollWidth        //html内容，页面大小

西瓜味白桃汽水

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll系列和offset系列 client系列 js

offset系列offsetWidth：元素实际宽度 + padding左右内间距 + 边框左右宽度（offsetWidth返回在不同页面中对象的宽度值）offsetHeight：元素实际宽度 + padding上下内间距 + 边框左右宽度（offsetHeight返回在不同页面中对象的高度值）offsetLeft:当前对象到其上级层左边的距离，不能对其进行赋值.设置对象到页面左部的距离请用style.left属性..offsetTop :当前对象到其上级层顶部的距离.，不能对其进行赋值.设置对象
复制链接

扫一扫