盒模型宽高
- dom.style.width/height (只适用获取内联元素的宽和高,不合法值,取出来是空字符)
- dom.currentStyle.width/height (获取渲染后的宽高,但是仅IE支持)
- window.getComputedStyle(dom).width/height (与2原理相似,但是兼容性,通用性会更好一些) (始终是content,即使border-box)(渲染后的样式, 包括继承的样式)
- dom.getBoundingClientRect().widht/height (计算元素绝对位置,获取到四个元素left,top,width,height)(始终是content,即使border-box)(scrollIntoView滚动至可视区域)
offset
- offsetWidth / offsetHeight
只读, 包含 content, padding, border,滚动条的宽度/高度
- offsetTop / offsetLeft
只读, 相对于其 offsetParent 元素的顶部/左侧的距离 , offsetParent为最近的非static父元素或最近的 table, table cell 或根元素
client
- clientWidth / clientHeight
只读, 包含 content, padding
- clientTop / clientLeft
只读, 上/左边框的宽度
- clientX / clientY
事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平/垂直坐标
scroll
- scrollWidth / scrollHeight
只读, 表示元素内容的宽度/高度,包括由于滚动而未显示在屏幕中内容 (即整个滚动内容宽高)
- scrollTop / scrollLeft
读写, 元素的顶部/左侧到视口可见内容(的顶部/左侧)的距离