Lasy

前端开发攻城狮~

js各种宽度高度总结

js中有很多与高度宽度相关的属性,这篇文章旨在对这些属性做一个全面易懂的总结。

属性

  • window.innerWidth/innerHeight:浏览器视口(viewport)宽度(包括竖直/水平滚动条,不包括浏览器标题栏,导航栏,地址栏,书签栏等)。
  • window.outerWidth/outerHeight:获取浏览器窗口外部的宽/高度,即整个浏览器的宽/高度。
  • screen.width/height:屏幕的宽/高度。
  • screen.availWidth/availHeight:屏幕可用空间的宽/高度。可用宽/高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直/水平空间。
  • Element.clientWidth/clientHeight:如果元素是块级元素,返回元素的内部宽/高度四舍五入后的值;如果元素是行内元素,返回 0 。
    • 内部宽/高度(inner width/height)是指包括padding和内容区域在内的区域但是不包括滚动条的宽/高度。
    • inner width= content width+ padding – vertical scrollbar width,高度同理。
    • content width/height 受盒模型影响
  • HTMLElement.offsetWidth/offsetHeight:如果元素是块级元素,返回元素的布局宽/高度四舍五入后的值;如果元素是行内元素,返回 0 。
    • 布局宽/高度(layout width/height)是指包括border、padding和内容区域在内的区域的宽/高度。
    • layout width = content width + padding + border ,高度同理。
    • 布局宽/高度比内部宽/高度多了border和scrllbar,所以clientWidth + border + padding = offsetWidth,高度同理。
  • Element.scrollWidth/scrollHeight:元素的理论宽/高度,即元素没有被隐藏的部分,所有内容都显示所需要的宽度和高度,相当于没有隐藏部分的clientWidth/clientHeight。

函数

  • Element.getBoundingClientRect().width/height:如果元素是块级元素,返回元素的布局宽/高度;如果元素是行内元素,返回 0 。相当于没有进行四舍五入的offsetWidth/offsetHeight。

参考链接:

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注