浏览器对象表示宽高属性的整理

Posted on 2020-07-05 12:33  妖娆的油条  阅读(179)  评论(0编辑  收藏  举报

window

innerHeight: 返回窗口的文档显示区域高度

innerWidth: 返回窗口的文档显示区域宽度

outerHeight: 返回窗口的外部高度,包括工具条和滚动条(缩放浏览器的时候会发生变化)

outerWidth: 返回窗口的外部高度,包括工具条和滚动条(缩放浏览器的时候会发生变化)

pageXOffset: 设置或返回当前页面相对于窗口显示区左上角的 X 位置。(x轴滚动的距离)

pageYOffset: 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。(y轴滚动的距离)

html 元素对象

clientHeight: 在页面上返回内容的可视高度(不包括边框,边距或滚动条) ---在google、360里返回的是整个元素的高度,包括内边距、超出页面范围。不包括边框、滚动条

clientWidth:在页面上返回内容的可视宽度

offsetHeight, offsetWidth:在上面的基础上加上了边框、滚动条

offsetLeftoffsetTop: 元素的水平、竖直偏移量。和设置position和margin都有关

.box {
      position: fixed;
      top: -100px;    // offsetTop= -100
      left: -100px;    // offsetLeft= -100
      /* margin-left: 10px; */   // offsetTop = 10
      border: 1px solid #999;
      padding: 50px;
      height: 300px;
      width: 300px
    }

scrollHeight, scrollWidth :与clientHeight一样

scrollLeft, scrollTop: 不知道什么意思

补充: window对象可以通过console.log(window)查看对象属性,document对象以及其节点必须通过console.dir()查看属性

Copyright © 2024 妖娆的油条
Powered by .NET 8.0 on Kubernetes