网页中的种种上下左右宽高值

2024年4月27日 166次阅读 来源: 如沐

三种范例offset client scroll

offset

  • 只读属性。
  • width/height——显示出来的屏幕尺寸
  • top/left——相对于定位父元素的相对位置

client

  • 只读属性。
  • width/height——不带边框的offset，也不包括转动条宽度
  • top/left——内边距的外边沿与边框外边沿的间隔，通常是边框宽度

scroll

  • width/height——只读，带有溢出内容的client
  • top/left——非只读，相对于父容器的转动肇端位置，修正值能够转变转动位置

demo代码见：https://codepen.io/jabbar/pen…

附加

  • window.outerWidth/window.outerHeight——窗口的外层的宽度和高度
  • window.innerWidth/window.innerWidth——浏览器窗口的视口(viewport)的宽度和高度
  • window.screen.width/window.screen.height——屏幕宽度和高度
  • window.screen.availWidth/window.screen.availHeight——屏幕可用宽度和高度
  • window.screenTop/window.screenLeft——浏览器在屏幕位置

参考：

    原文作者：如沐
    原文地址: https://segmentfault.com/a/1190000018771019
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞