关于前端浏览器,元素定位的尺寸位置

元素的长宽 :

node.style.width/height

块级元素的内容可视宽/高度 +水平/垂直方向padding值:

node.clientWidth/clientHeight,针对纯行内元素获取的值永远为0

页面视口的尺寸(浏览器显示页面内容的区域):

documentElement.clientWidth/clientHeight

元素的内容可视宽度/高度 +水平/垂直方向padding值 + 水平/垂直方向border值 

node.offsetWidth/offsetHeight

元素的内容可视宽度/高度 +水平/垂直方向padding值+ 水平/垂直方向滚动或溢出部分内容宽度/高度:

 node.scrollWidth/scrollHeight,当不存在滚动溢出的内容时,该值与对应的ciientWidth/clientHeight一致

  • 针对纯行内元素获取的值永远为0。
  • 通过documentElement.scrollWidth/scrollHeight可获取页面视口的尺寸

当前页面的视口宽度/高度:

window.innerWidth/innerHeight,一般跟documentElement.clientWidth/clientHeight是等价的

window.outerWidth/outerHeight,表示当前整个浏览器窗口的宽度/高度,即你打开的浏览器软件显示的宽度/高度

在移动端理想视口的情况下,一般innerWidth与outerWidth是相等的

屏幕宽度/高度的CSS像素值:

window.screen.width/height/availWidth/availHeight

当前浏览器在屏幕中的可用的宽度/高度的CSS像素值:

screen.availWidth/availHeight,或者理解为当前状态下浏览器可能的最大宽度/高度。

screen.width不一定等于screen.availWidth。当有其他小工具占据了屏幕空间时,浏览器有时不能占用小工具(如任务栏)占据的空间。

元素距离浏览器视窗的尺寸:

node.getBoundingClientRect(),该方法的返回值为一个对象,具有width和height两个尺寸属性,如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box,元素的的尺寸等于 width/height。


event.pageX/Y,screenX/Y,clientX/Y

来自于DOM事件Event对象

pageX/Y表示事件触发位置相对整体页面的左上角的位置(包括页面滚动距离)

screenX/Y表示事件触发位置相对屏幕的左上角的位置

clientX/Y表示事件触发位置相对当前页面可视区域的左上角的位置

node.offsetTop/offsetLeft

表示当前节点元素相对最近的定位祖先元素的的顶部/左边界内边距的位置

 node.scrollTop/scrollLeft

表示当前节点元素内部被滚动的垂直/水平距离,前提是这个这个元素内部产生了滚动条,否则该值返回0

node.style.left/top

这个只能获取元素的内联style样式中定义的left/top属性值,若该元素没有定义style属性,则返回值为空字符串

node.getBoundingClientRect()

返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。

你可能感兴趣的:(我的笔记,前端,javascript,html,定位,元素尺寸)