JavaScript中页面位移、大小和位置属性整理

2023-12-14 11:47:42

🤞🤞 一、window

window 滚动位移属性

  • window.scroll(X,Y) 滚动数不叠加
  • window.scrollTo(X,Y) 滚动数不叠加
  • window.scrollBy(X,Y) 滚动数叠加
  • window.scrollY / Firefox、Chrome、Opera均支持,IE不支持 忽略DOCTYPE定义规则

window窗口大小属性

  • window.innerheight 返回窗口文档显示区的高度
  • window.innerwidth 返回窗口文档显示区的宽度
  • window.outerheight 返回窗口的外部高度
  • window.outerwidth 返回窗口的外部宽度
  • window.screen.height/width 显示器的完整分辨率
  • screen.availHeight/Width 显示器去除任务栏的剩余分辨率

调整大小

  • resizeTo(newWidth,newHeight)
  • resizeBy(changeWidth,changeHeight)

window窗口定位属性

  • window.pageXOffset 设置或返回当前页面相对于窗口显示区左上角的x位置
  • window.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的y位置 / IE9+、Firefox、Chrome、Opera均支持该方式获取页面,并且会忽略DOCTYPE定义规则
  • window.screenLeft 网页正文部分左||window.screenX 左上角x坐标
  • window.screenTop 网页正文部分上 ||window.screenY 左上角y坐标
  • event.screenX/Y 事件发生时,鼠标距离显示器左上角的坐标

移动window窗口位置

  • window.moveTo(newX,newY)
  • window.moveBy(changeX,changeY)

🤞🤞二、Document

HTML元素上的scrollTop属性

  • document.documentElement.scrollTop
    如果未定义DOCTYPE文档头,所有浏览器都支持docume.body.scrollTop属性获取滚动高度
    如果页面定义了DOCTYPE文档头,那么HTML元素上的scrollT属性在IE、Firefox、Opera(presto内核)下都可以获取滚动高度值,而在Chrome和Safari下其值为0**。
  • document.documentElement.scrollLeft 设置和获取页面文档向右滚动过的像素数
  • document.documentElemnt.scrollTop 设置和获取页面文档向下滚动过的像素数
  • document.documentElement.scrollWidth html元素对象的滚动宽度
  • document.documentElement.scrollHeight 即html元素对象的滚动高度

实际开发中的写法

var _scrollLeft=window.scrollX||window.pageXOffset||document.documentElement.scrollLeft
var _scrollLeft=window.scrollY||window.pageYOffset||document.documentElement.scrollTop

元素位置属性 el

  • el.clientTop:该元素对象的上边框的宽度
    • document.ducumentElement.clientTop 获取html元素对象的上边框的宽度
  • el.clientLeft: 该元素对象的左边框的宽度
    • document.documentElement.clientLeft 获取html元素对象的左边框的宽度
  • el.clientWidth: 元素内容的宽度,不包括边框
  • el.clientHegiht: 元素内容的高度
  • el.offsetLeft: 元素左边框到窗口左边界的距离
    • document.documentElement.offsetLeft html元素的margin
  • el.offsetTop:元素上边框到窗口上边界的距离
    • document.documentElement.offsetTop html元素的margin
  • 在IE中,offsetLeft和offsetTop的值始终为0。

el.offsetWidth: 左外边框至右外边框的距离

el.offsetHeight: 上外边框至下外边框的距离

元素位置属性 body

  • document.body.clientWidth 网页可见区域宽
  • document.body.clientHeight 网页可见区域高
  • document.body.offsetWidth 网页可见区域宽(包括边线的宽)
  • document.body.offsetHeight 网页可见区域高(包括边线的高)
  • document.body.scrollWidth 网页正文全文宽
  • document.body.srollHeight 网页正文全文高
  • document.body.srollTop 网页被卷去的高
  • document.body.scrollLeft 网页被卷去的左

🤞🤞 三、Screen对象

Screen对象 显示器的高度和宽度

  • screen.availHeight 返回显示屏幕的高度(除Windows任务栏40之外)/屏幕可见工作区高度
  • screen.availWidth 返回显示屏幕的宽度(除Windows任务栏之外)/屏幕可见工作区宽度
  • screen.height 返回显示屏的高度 分辨率
  • screen.width 返回显示器屏幕的宽度 分辨率

🤞🤞 四、event对象

事件位移对象 event

  • e.clientX、e.clientY
    鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
  • e.pageX、e.pageY
    类似于e.clientX、e.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
  • e.offsetX、e.offsetY
    鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
  • e.screenX、e.screenY
    鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

文章来源:https://blog.csdn.net/Code_King006/article/details/134969868
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。