javascript获取浏览器各种宽度.docx

JavaScript获取浏览器各种高度JavaScript获取浏览器各种高度最近做页面总涉及到元素的大小和位置，需要动态设置，每次都需要时现去网上查询，很多时候各种宽高容易混淆，各浏览器兼容的也不一样，网上搜索点资料，整理一下，亲自测试了一下，总结一下。这个是流传网络上很经典的一个图片，一般都能看明白，基本非常全面了，这里如果找不到需要的，就继续往下看吧。注意：头信息声明很关键：屏幕高度：window.screen.height屏幕宽度：window.screen.width这两个是屏幕分辨率大小，比如1024*768，1440*900等。屏幕可用区域高度：window.screen.availHeight屏幕可用区域宽度：window.screen.availWidth什么是屏幕可用区域：简单理解就是去除任务栏之后的区域（当然还有别的工具栏等，看具体情况） 浏览器距离屏幕上方的距离：window.screenTop浏览器距离屏幕左方的距离：window.screenLeft这个有浏览器的区别：IEIE在frameset中（白、绿色部分的window.screenTop）Chrome（frameset也一样，也是浏览器距离屏幕顶部的高度）当前页面的可见区域宽度：document.documentElement.clientWidth当前页面的可见区域高度：document.documentElement.clientHeight如果是在frameset里面的frame，则是frame里面显示的宽度和高度头声明需要加上：document.body.clientHeight：当前文本内容宽度body高度，指定了大小，则与浏览器大小无关，不指定或百分比，则可能与浏览器大小有关，与内容区有关。document.body.offsetWidth：body宽度，带边框，如果有2px的边框，则比document.body.clientWidth 多4px（左右都2px）的大小同理Heightdocument.body.scrollTop：滚动条距离页面头的长度document.body.scrollLeft同理body滚动条的高度：document.body.scrollHeight， 3浏览器一样，都是整个滚动条高度页面滚动条高度：document.documentElement.scrollHeight，和上面差不多，IE，chrome和上面的一样宽度同理friefox会获取实际有元素的高度其他HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth（同理高度）scrollHeight：获取对象的滚动高度。 scrollLeft：设置或者获取位于对象左边界和窗口中今朝可见内部实质意义的最左端之间的距离 scrollTop：设置或者获取位于对象最顶端和窗口中可见内部实质意义的最顶端之间的距离 scrollWidth：获取对象的滚动宽度 offsetHeight：获取对象相对版面或者由父坐标offsetParent 属性指定的父坐标的高度 offsetLeft：获取对象相对版面或者由offsetParent 属性指定的父坐标的计算左侧位置 offsetTop：获取对象相对版面或者由offsetTop 属性指定的父坐标的计算顶端位置 event.clientX：相对文档的程度