前端JS你知道这些[尺寸和坐标]吗?

我心飞翔 分类:javascript

JS中的“尺寸和坐标”

先说一句
  大家好,这里是沉曦!一个前端的小学生。
  无论在学习还是开发中,常常要对元素的位置或元素宽高进行一系列的操作;但是有时目标元素的坐标或宽高不能第一时间获取,还需要经过自己某种计算这些坐标;但其实,你知道吗?js中有多种获取不同情况下的坐标位置和宽高尺寸;它可以做到帮你省略不必要的计算,一步到位。我们这就来“整”?

三个系列

为了学习和区分,JS的追求者们它们分成了三个系列:

  • e 系列
  • 三大家族系列(offset、client、scroll)
  • window 系列

系列阐述

e系列

主要用于鼠标事件触发时,鼠标位置坐标的获取。

e系列 作用
clientX 返回当事件被触发时,鼠标指针相对于浏览器的有效区域的水平方向坐标。
clientY 返回当事件被触发时,鼠标指针相对于浏览器的有效区域的垂直方向坐标。
screenX 返回当事件被触发时,鼠标指针相对于显示器屏幕x轴的水平坐标。
screenY 返回当事件被触发时,鼠标指针相对于显示器屏幕y轴的垂直坐标。
offsetX 返回当事件被触发时,鼠标相对于事件源x轴的位置
offsetY 返回当事件被触发时,鼠标相对于事件源y轴的位置
e.pageX: 鼠标相对于文档水平方向的距离( ie678 不支持)
e.pageY: 鼠标相对于文档垂直方向的距离( ie678 不支持)

三大家族系列

主要用于dom元素的位置坐标及宽高尺寸的获取。

元素偏移量offset系列

offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

  1. 获得元素距离带有非静态定位父元素的位置
  2. 获得元素自身的大小(宽度高度)
  3. 注意:返回的数值都不带单位
offset系列属性 作用
element.offsetParent 返回作为该元素带有"非静态定位最近"的父辈元素 如果父辈元素都没有非静态定位则返回"body"元素
element.offsetTop 返回元素相对带有"非静态定位"父辈元素上方的偏移量 如果父辈都没有定位则返回相对"body"的"上方"偏移量
element.offsetLeft 返回元素相对带有"非静态定位"父辈元素左方的偏移量如果父辈都没有定位则返回相对"body"的"左"方偏移量
element.offsetWidth 返回自身包括padding、边框、内容区的总宽度 , 返回数值不带单位 其实就是盒子的真实宽度
element.offsetHeight 返回自身包括padding、边框、内容区的总高度 , 返回数值不带单位 其实就是盒子的真实高度

特别注意:

如果元素不显示 offsetTop 跟 offsetLeft 无法获得具体的值; offsetWidth 跟 offsetHeight 也是同理;( 元素在 浏览器处于显示状态,才能取得有效的值)

如果元素的图片元素,最好在window.onload完成之后在获取图片的offsetWidth跟offsetHeight, 否则有可能出现获取offsetWidth跟offsetHeight值为0的情况 。

插一下话:offset 与 style 区别

offset

  • offset 可以得到任意样式表中的样式值
  • offset 系列获得的数值是没有单位的
  • offsetWidth 包含padding+border+width
  • offsetWidth 等属性是只读属性,只能获取不能赋值
  • 所以,我们想要获取元素大小位置,用offset更合适

style

  • style 只能得到行内样式表中的样式值
  • style.width 获得的是带有单位的字符串
  • style.width 获得不包含padding和border 的值
  • style.width 是可读写属性,可以获取也可以赋值
  • 所以,我们想要给元素更改值,则需要用style改变

元素可视区 client 系列

client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性 作用
element.clientTop 返回上边框的大小
element.clientLeft 返回左边框的大小
element.clientWidth 返回自身包括padding、内容区宽度 ,不含边框 , 返回数值不带单位
element.clientHeight 返回自身包括padding、内容区高度 ,不含边框 , 返回数值不带单位

**注意:**clientTop可以获取上边框的大小,clientLeft可以获取左边框的大小,没有clientBottom跟clientRight

小结: client 宽度 和我们offsetWidth 最大的区别就是 不包含边框

不可视区 scroll系列

scroll系列属性 作用
element.crollWidth 元素中内容的实际高,并不是元素的宽;当元素中没有内容,或内容很少时,才得到元素的宽,不包含border。此宽高为元素的实际宽,即包含因滚动而隐藏在浏览器可视区外的内容。
element.scrollHeight 元素中内容的实际宽,并不是元素的高;当元素中没有内容,或内容很少时,才得到元素的高,不包含border。此宽高为元素的实际高,即包含因滚动而隐藏在浏览器可视区外的内容。
element.scrollLeft 计算元素卷曲出去的left值。
element.scrollTop 计算元素卷曲出去的top值

(谷歌只认识他)(火狐IE9+认识他)认为是页面的body卷曲出去 document.body.scrollTop/scrollLeft
(IE678只认识他)(火狐IE9+认识他)认为是页面的HTML文档卷曲出去 document.documentElement.scrollTop/scrollLeft
**(推荐使用)**火狐/谷歌/ie9+以上支持的(不管DTD) window.pageXOffest/pageYOffest

window

window系列 作用
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window.pageXOffset 设置或返回文档在窗口左上角水平方向滚动的像素
window.pageYOffset 设置或返回文档在窗口左上角垂直方向滚动的像素

有三种方法能够获取浏览器窗口的尺寸(浏览器的窗口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

获取浏览器窗口滚动的尺寸

pageXOffset 和 pageYOffset 属性

返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

总结

Snipaste_2021-04-10_16-39-26.png
最后一句

这是小沉曦参考其他小编加上自己理解的学习心得!若有不正,还望斧正。希望渴望正义的你们不要吝啬对我的建议哟,回见。

回复

我来回复
  • 暂无回复内容