窗口大小/位置

窗口 - 宽度 / 高度 / 偏移

网页<body> - 宽度
document.body.clientWidth

0

网页可见区域（包括边线）
document.body.offsetWidth

0

网页整体宽度（包括滚动）
document.body.scrollWidth

0

网页被卷去的左
document.body.scrollLeft

0

浏览器（可见区域） - 宽度
window.innerWidth

0

浏览器（包括边框） - 宽度
window.outerWidth

0

屏幕分辨率 - 宽度
window.screen.width

0

屏幕可用工作区 - 宽度
window.screen.availWidth

0

网页<body> - 高度
document.body.clientHeight

0

网页可见区域（包括边线）
document.body.offsetHeight

0

网页整体高度（包括滚动）
document.body.scrollHeight

0

网页被卷去的上
document.body.scrollTop

0

浏览器（可见区域） - 高度
window.innerHeight

0

浏览器（包括边框） - 高度
window.outerHeight

0

浏览器X轴滚动距离
window.scrollX

0

浏览器Y轴滚动距离
window.scrollY

0

屏幕分辨率 - 高度
window.screen.height

0

屏幕可用工作区 - 高度
window.screen.availHeight

0

屏幕缩放因子
window.devicePixelRatio

0

屏幕设备

No Data

盒子 - 宽度 / 高度 / 偏移

clientWidth

0

offsetWidth

0

scrollWidth

0

clientHeight

0

offsetHeight

0

scrollHeight

0

offsetTop

0

offsetLeft

0

scrollTop

0

scrollLeft

0

scrollX

0

scrollY

0

getBoundingClientRect().left

0

getBoundingClientRect().top

0

getBoundingClientRect().right

0

getBoundingClientRect().bottom

0

getBoundingClientRect().width

0

getBoundingClientRect().height

0

getBoundingClientRect().x

0

getBoundingClientRect().y

0

myBox

（拖拽试试）

width:

250px

height:

250px

padding:

3px

border:

5px

box-sizing:

属性说明

offsetWidth	标准盒模型 : width + 左右padding + 左右border-width IE盒模型 : width	offsetHeight	标准盒模型： height + 上下padding + 上下border-width IE盒模型 : height	clientWidth	标准盒模型： width + 左右padding IE盒模型： width - 左右border
clientHeight	标准盒模型： height + 上下padding IE盒模型： height - 左右border	scrollWidth	内层元素的真实的宽度（可视区域宽度+被隐藏区域宽度）	scrollHeight	内层元素的真实的高度（可视区域高度+被隐藏区域高度）
offsetLeft	父节点无position属性情况 : 元素左侧外边框到浏览器窗口左内侧的距离父节点有position属性情况 : 元素左侧外边框到父元素左边框内侧的距离	offsetRight	父节点无position属性情况 : 元素右侧外边框到浏览器窗口右内侧的距离父节点有position属性情况 : 元素右侧外边框到父元素右边框内侧的距离	offsetTop	父节点无position属性情况 : 元素顶部外边框到浏览器窗口顶部内侧的距离父节点有position属性情况 : 元素顶部外边框到父元素顶部边框内侧的距离
offsetBottom	父节点无position属性情况 : 元素底部外边框到浏览器窗口底部内侧的距离父节点有position属性情况 : 元素底部外边框到父元素底部边框内侧的距离	getBoundingClientRect()	获取某个元素相对于浏览器边框的位置集合 top ：元素上边到视窗上边的距离 bottom ：元素下边到视窗上边的距离 left ：元素左边到视窗左边的距离 right ：元素右边到视窗左边的距离 width ：元素的宽度（不包含margin） height ：元素的高度（不包含margin） x ：元素的上边到视窗上边的距离 y ：元素的下边到视窗上边的距离

概念说明

PPI	点密度（Dot Per Inch），每英寸内的dot数量，可分为水平DPI和垂直DPI	DPI	像素密度（Pixels Per Inch），对角线长度为1英寸的面积内的像素点数量	DPPX / DPR	设备像素比，指每像素内的dot点数

推广

共 0 条评论