About Browser Height and Width

SHOYUF

  • window.outerHeight/window.outerWidth 浏览器外层(整体)宽高值

  • window.innerHeight/window.innerWidth 浏览器内层(WebView)宽高值

  • (window.)screen.height/(window.)screen.width 屏幕(整体)分辨率宽高值

  • (window.)screen.availHeight/(window.)screen.availWidth 屏幕(除去任务栏)分辨率宽高值

  • window.screenTop/window.screenLeft 浏览器外层(整体)相对于屏幕上端和左端的距离

  • element.clientHeight/element.clientWidth 元素内部宽高值(包含padding),不包括scroll、border、margin

  • element.clientLeft/element.clientTop 元素border宽高值(包括滚动条的宽度)

  • element.offsetHeight/element.offsetWidth 元素contnet、padding、scroll、border宽高值总和

  • element.offsetLeft/element.offsetTop 当前元素左上角相对于 HTMLElement.offsetParent 节点的左/上边界偏移的像素值

  • offsetParent 有两种情况:

    1. 如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body.

    2. 假如当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素。

  • document.body.scrollWidth/document.body.scrollHeight

    1. 给定body宽高 < 浏览器窗口时:

      scrollWidth = 浏览器窗口宽度
      scrollHeight = 浏览器窗口高度

    2. 给定body宽高大于浏览器窗口,且内容小于给定body宽高时:

      scrollWidth = 给定的宽度 + body所有padding + body所有margin + body所有border
      scrollHeight = 给定的高度 + body所有padding + body所有margin + body所有border

    3. 给定body宽高大于浏览器窗口,且内容大于给定窗口时:

      scrollWidth = 内容的宽度 + body所有padding + body所有margin + body所有border
      scrollHeight = 内容的高度 + body所有padding + body所有margin + body所有border

  • element.scrollWidth和element.scrollHeight

    1. 当无滚动条时:
      scrollWidth = clientWidth = 元素宽度 + padding
      scrollHeight = clientHeight = 元素高度 + padding

    2. 当有滚动条时:
      scrollWidth = 实际内容的宽度 + padding
      scrollHeight = 实际内容的高度 + padding

  • element.scrollTop及element.scrollLeft

    这对属性是可读写
    指的是滚动的距离
    写入也可用 element.scrollTo(x,y)

  • window.scrollY及window.scrollX

    window.scrollY 文档从顶部开始滚动过的像素值 / window.scrollX 文档从左侧开始滚动的像素值。
    event中的五种坐标

  • element.getBoundingClientRect() IE9兼容 获取距离屏幕位置

本站使用署名 4.0 国际 (CC BY 4.0) 创作共享协议,转载请署名,图片请转存。

提醒:本文最后更新于 556 天前,文中所描述的信息可能已发生改变,请谨慎使用。