js 常用 DOM 元素宽高

提示：document.documentElement 和 document.getElementsByTagName('html')[0] 是一样的；

1、视口大小(不包括滚动条，视口字面理解当然是不包括滚动条)，

document.documentElement.clientWidth

document.documentElement.clientHeight

即使给 html 元素显示设置了宽高，返回的值也仍然是视口的尺寸，这是非常特殊的，跟普通 ele.clientWidth 含义不同。

通常情况下，ele.clientWidth 指的是 ele，作为包含块，给于内部元素的一个视口，ele 的尺寸和 clienWidth 是相关的，详情戳clientWidth

按照这个逻辑，我们应该计算 html 的包含块，也就是初始包含块的 clientWidth，但是似乎没有接触初始包含块的接口，仅仅知道，在桌面端，他的尺寸和视口一致；

所以当我们设置

   html {

      height: 100%;

      width: 100%;

    }

其实，是将 html 的宽高设置为初始包含块的宽高，等于视口的宽高。

关于 body 的这个属性，如果消除了默认的 margin ,则和上方是相等的：

document.body.clientWidth

document.body.clientHeight

但是如果给 body 显示设置了宽高，返回的就不一定是视口的宽高了，这是普通元素的特性。

另外，浏览器窗口大小（浏览器窗口，自然是包括滚动条的）：

window.innerWidth

window.innerHeight

屏幕大小（设备像素，不常用，其实就是分辨率），即使浏览器缩小了，这个值也不会变，是屏幕。

screen.width

screen.height

2、文档大小（包含了超出文档的溢出部分）

document.documentElement.scrollHeight

document.documentElement.scrollWidth

文档大小（不包含超出文档的溢出部分，如果 overflow:hidden，那么和上面的是一致的，但这个属性耗性能）

document.documentElement.offsetHeight

document.documentElement.offsetWidth

3、文档滚动的大小

兼容移动端需要用：

window.pageXOffset

window.pageYOffset

别名 scrollX / scrollY ,IE 不兼容别名，兼容 pageXOffset / pageYOffset，但是 IE9 之前的两个都不兼容；

另一种常用的写法：

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

可写可读，缺点是不兼容移动端；

4、元素相对于视口的位置

ele.getBoundingClientRect(); //包含4 个属性：left、top、right 和bottom

5、元素的大小（border-box，不包含溢出部分，包括溢出的用）

ele.offsetWidth;

ele.offsetHeight;

元素的大小（border-box 包括溢出的部分，如果溢出隐藏，和上面值一致）

ele.scrollWidth;

ele.scrollHeight;

6、元素滚动的大小，（应该是相对于包含块）可写（当然包含块要处于溢出状态才行）

ele.scrollTop;

ele.scrollLeft;

　　html.scrollTop 相对于初始包含块，所以上文 html.scrollTop 计算文档相对于视口的偏移就是这个道理

7、元素相对于文档的位置（貌似没有原生的 API，推算就是，相对于视口的偏移 + 文档相当于视口的滚动）

ele.getBoundingClientRect().top+document.documentElement.scrollTop;

ele.getBoundingClientRect().left+document.documentElement.scrollLeft;

8、计算滚动条的宽度

function getScrollbarWidth() {

    var para = document.createElement('p'),

        styles = {

            width: '100px',

            height: '100px',

            overflowY: 'scroll'

        },

        i, scrollbarWidth;

    for (i in styles) { para.style[i] = styles[i]; };

    document.body.appendChild(para);

    scrollbarWidth = para.offsetWidth - para.clientWidth;

    document.body.removeChild(para);

    return scrollbarWidth;

}

参考资料：

JavaScript高级程序设计-第3版-中

https://yq.aliyun.com/ziliao/52315

巴特西

js 常用 DOM 元素宽高

最新文章

热门文章