重要理解

• content:内容区域
• scroller:滚动条
• margin无论如何都不会被算进width/height
• scroller是否被算进width/height是根据不同api决定的
• css样式表的width/height与行内样式的width/height是一回事，只有优先级的不同
• 基于box-sizing:BB模式下设置的width/height叫BBWidth/Height
• 基于box-sizing:CB模式下设置的width/height叫CBWidth/Height
• **BBWidth/Height:contentWidth/Height+padding+border **
  • 当你基于BB模式下，设置一个width，系统会自动根据width值与padding值border值给你计算出contentWidth/Height
• CBWidth/Height:contentWidth/Height
  • 当你基于CB模式下，设置的width就是contentWidth/Height，padding值border值另算

window相关宽高属性

.outerWidth/outerHeight 与 .innerWidth/innerHeight

• .innerWidth/innerHeight 把滚动条也算在内

.screen.width/height 与 .screen.availWidth/availHeight

• availHeight不包括固定在windows底部的任务栏

.screenTop/.screenLeft

document相关属性

概述

• 边框以内区域 offsetXXX:border+scrollbar+padding+contentWidth/Height
• 内容展示区域 clientXXX:padding+contentWidth/Height
  • 是用户可见范围，不包括scroller所隐藏的范围
• *内容真实区域 scrollXXX: clientXXX:padding+contentWidth/Height - *contentWidth/Height: 特殊的contentWidth/Height,包括overflow溢出屏幕不可见的内容
  • 经测试，不包括scroller
  • 例如，一个300x300像素 的滚动盒子里放置了一个600x400像素的元素，scrollWidth将会返回600，scrooHeight返回400.
  • 目前经测试,若有溢出的内容，隐藏溢出的内容与显示溢出的内容所引起的scrollXXX值也是不同的
  • 目前尚未很好理解这个值

测试是否理解概述

通过这个地址在console中敲一下以下代码看看是否与预期一致

div.clientWidth // 29 返回值经四舍五入但其实准确是28.6 可以通过getBoundingClientRect()查看到
// 计算过程:22.6 + (3+1) * 2 = 28.6
div1.clientWidth // 21 返回值经四舍五入但其实准确是20.6 可以通过getBoundingClientRect()查看到
// 计算过程:22.6 - 1 * 2 = 20.6

client相关属性

document.body.clientWidth/clientHeight 与 element.clientWidth/clientHeight

• 该属性值在小数点存在四舍五入现象。如果需要一个小数值精确值，可使用 element.getBoundingClientRect()

document.body.clientLeft/clientTop 与 element.clientLeft/clientTop

• 表示一个元素的左border/顶部border的宽度
• 不包括padding与margin

offset相关属性

document.body.offsetWidth/offsetHeight 与 element.offsetWidth/offsetHeight

• border+padding+content+scroller
• 且一定是一个整数

获取Dom宽高

element.getBoundingClientRect()

• 返回小数值
• 返回的始终是contentWidth/Height+padding+border
  • 不用纠结boxsizing取值是border-box还是content-box
  • 因为BB下，width/height=contentWidth/Height+padding+border
  • CB下,width/height=contentWidth/Height

style.width

• 当设置或获取element.style.width时，其实都是设置/获取行内的样式

<div style="height:150px">这是行内样式</div>

• 如果一个元素行内样式未设置宽高，则style.width返回空

一个问题:style.width方式设置的width究竟指的是BB下的width还是CB下的width?

答案:style.width你就想象成写在css样式表中的width属性，然后只需要判断当前box-sizing模式，

• 若BB，则width就是contentWidth/Height+padding+border
• 若CB，则width就是contentWidth/Height

综合示例

div.style.height // 150px
div1.style.height // 150px
div.style.width // ""
div1.style.width // ""
div.getBoundingClientRect() // height:158px
div1.getBoundingClientRect() // height:150px

综合示例 --- 按上面代码console中敲一下看看是否与你预期一致