offset、client、scroll、getBoundingClientRect()

最新推荐文章于 2024-02-01 17:00:52 发布

weixin_44414783

最新推荐文章于 2024-02-01 17:00:52 发布

阅读量340

点赞数

分类专栏：获取位置文章标签： offset client scroll getBoundingRect

本文链接：https://blog.csdn.net/weixin_44414783/article/details/85929248

版权

获取位置专栏收录该内容

1 篇文章 0 订阅

订阅专栏

div的offset、client、scroll系列
1、div的offset系列
div.offsetWidth,div.offsetHeight //border+padding+内容宽高
div.offsetLeft,div.offsetTop //距离第一个有定位的父级元素的左上距离，没有就以body为准
2、div的client系列
div.clientWidth,div.clientHeight //padding+内容宽高
div.clientLeft,div.clientTop //左边（上边）边框的宽度
3、div的scroll系列
div.srollWidth,div.scrollHeight //能够滚动的内容宽高
div.srollLeft,div.scrollTop //左边（上边）滚动长度

    <style>
        div{ width: 200px; height: 200px; background-color: pink;overflow: scroll; }
    </style>
</head>
<body>
<div>
 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
<script>
    var div=document.getElementsByTagName("div")[0];
    console.log(div.scrollWidth,div.scrollHeight);//183 231
</script>

鼠标事件Event事件
1.鼠标相对可视文档区域左上角
clientX，clientY （兼容）
x，y（IE相对文档开头位置。前提：父级元素没有设置position:relative之类的，否则相对于最近元素，而非相对于文档）
2.鼠标相对文档区域左上角
pageX、pageY(非IE)
layerX、layerY(IE和opera不支持)
x，y（IE相对文档开头位置，前提：父级元素没有设置position:relative之类的，否则相对于最近元素，而非相对于文档）
3、鼠标距离屏幕左上角的位置
screenX、screenY 相对于屏幕左上角位置（类似固定定位）
4、鼠标距离定位元素左上角的位置
layerX、 layerY (如果定位)针对元素自身左上角，（如果没有定位）寻找父容器中有定位的相对位置，如果没找到就是相对文档
5、鼠标相对事件源（e.target）左上角
offsetX、offsetY(火狐不支持)
兼容写法：
offsetX=e.clientX-div.getBoundingClientRect().left;
offseY=e.clientY-div.getBoundingClientRect().top;

**获取屏幕、屏幕滚动宽高**
获取屏幕宽高：
	由于body有8pxmargin，用body偏小
	 网页可见区域宽： document.body.clientWidth (不包括边线的宽)
	网页可见区域高： document.body.offsetWidth (包括边线的高)
	可以用documentElement，指的是html的
	document.documentElement.clientWidth
	document.documentElement.clientHeight
	由于两者都存在兼容问题，所以兼容写法：
	var w = document.documentElement.clientWidth ||document.body.clientWidth;
	var h = document.documentElement.clientHeight || document.body.clientHeight;	
屏幕滚动宽高:
	网页正文宽： document.body.scrollWidth
	网页正文高： document.body.scrollHeight
	网页被卷去的高： document.body.scrollTop
	网页被卷去的左： document.body.scrollLeft
	兼容写法：var scrollTop=document.documentElement.srollTop||document.body.scrollTop;
	  **下面介绍：div.getBoundingClientRect()**
	它的返回值为：{top:xxx, right:xxx, bottom:xxx, left:xxx width:xxx,height:xxx} 
	分别表示div的上右下左距文档（不是可视文档)左边上边距离
	注意了：元素设置定位时多返回两个值x y，他们的值分别等于x=left    y=top
	
	注意点：
            left和top都是DOM对象的属性，获取时有单位
            x，y都是鼠标事件对象的属性，获取时无单位

weixin_44414783

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
offset、client、scroll、getBoundingClientRect()

获取div宽高div.offsetWidth,div.offsetHeight //border+padding+内容宽高div.clientWidth,div.clientHeight //padding+内容宽高div.srollWidth,div.scrollHeight //能够滚动的宽高
复制链接

扫一扫

专栏目录