js内置属性 页面标签距离宽高获取
文章 1846 0 0 0
发布时间:2018年10月11日

概述

在写一些拖拽或者固顶效果会用到一些内置的属性,下面是搜集的一些属性

鼠标盒子位置距离

名称 描述
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。
clientLeft 获取offsetLeft属性和客户区域的实际左边之间的距离。
clientTop 获取offsetTop属性和客户区域的实际顶端之间的距离。
clientWidth 获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。
offsetParent 获取定义对象offsetTop和offsetLeft属性的容器对象的引用。
offsetTop 获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的宽度。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的x坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的y坐标。
clientX,clientY 鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY 是相对于用户显示器的位置

获取页面宽度长度

名称 描述
网页可见区域宽 document.body.clientWidth
网页可见区域高 document.body.clientHeight
网页可见区域宽 document.body.offsetWidth (包括边线的宽)
网页可见区域高 document.body.offsetHeight (包括边线的宽)
网页正文全文宽 document.body.scrollWidth
网页正文全文高 document.body.scrollHeight
网页被卷去的高 document.body.scrollTop
网页被卷去的左 document.body.scrollLeft
网页正文部分上 window.screenTop
网页正文部分左 window.screenLeft
屏幕分辨率的高 window.screen.height
屏幕分辨率的宽 window.screen.width
屏幕可用工作区高度 window.screen.availHeight
屏幕可用工作区宽度 window.screen.availWidth
评论专区