CSS获取宽高的方式
<div id="getdocumentStyle" style="height: 100px;"></div>
#getdocumentStyle {
width:200px
}
1.dom.style.width/height
dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高,也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话,通过这种方法是获取不到 dom 的宽高的。
2.window.getComputedStyle(dom).width/height
这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取 到。
3.dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的。
4.dom.offsetWidth/offsetHeight
这种方法是最常用的,也是兼容最好的。
获得其他宽高的方式
获取屏幕的高度和宽度(屏幕分辨率): window.screen.height/width
获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen.availHeight/availWidth
网页全文的高度和宽度: document.body.scrollHeight/Width
滚动条卷上去的高度和向右卷的宽度: document.body.scrollTop/scrollLeft
网页可见区域的高度和宽度(不加边线): document.body.clientHeight/clientWidth
网页可见 区域的高度和宽度(加边线): document.body.offsetHeight/offsetWidth