document.body / document.ducumentElement /等获取高度和宽度的区别
2016-04-21 15:23
429 查看
document.body / document.ducumentElement /等获取高度和宽度的区别
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /**{ padding: 0; margin: 0;}*/ body{ height: 1500px; border:3px solid #fbcb09; padding: 5px;} .oBox{ width: 1000px; height: 1000px;} #div1{ position: fixed;bottom: 0; border: 1px solid #ffe87c; } </style> <script> window.onload = function(){ var a = getInfo(); var arr = a.split(" "); var oDiv= document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; for(var i =0; i < arr.length;i++){ var oLi = document.createElement('li'); oLi.innerHTML = arr[i]; oUl.appendChild(oLi); } } function getInfo(){ str = ""; str += "网页可见区域宽度:" + document.documentElement.clientWidth +"px,(包括padding、border、margin) "; str += "网页可见区域高度:" + document.documentElement.clientHeight +"px,(包括padding、border、margin) "; str += "网页body宽度:" + document.body.clientWidth +"px,(只包括padding) "; str += "网页body高度:" + document.body.clientHeight +"px,(只包括padding) "; str += "网页body区域宽度:" + document.body.offsetWidth +"px,(只包括padding,border) "; str += "网页body区域高度:" + document.body.offsetHeight +"px,(只包括padding,border) "; str += "网页滚动上去的高度(chrome+ie+opera):" + document.body.scrollTop +"px "; str += "网页滚动上去的高度(ff):" + document.documentElement.scrollTop +"px "; str += "网页滚动到左侧的宽度(chrome+ie+opera):" + document.body.scrollLeft +"px "; str += "网页滚动到左侧的宽度(ff):" + document.documentElement.scrollLeft +"px "; str += "网页内容宽度:" + document.body.scrollWidth +"px,(只包括padding,border) "; str += "网页内容高度:" + document.body.scrollHeight +"px,(只包括padding,border) "; str += "网页正文顶部位置:" + window.screenTop +"px(窗口距屏幕顶部的高度,非全屏时改变) "; str += "网页正文左侧位置:" + window.screenLeft +"px(窗口距屏幕左侧的宽度,非全屏时改变) "; str += "屏幕分辨率的宽:" + window.screen.width +"px "; str += "屏幕分辨率的高:" + window.screen.height +"px "; str += "屏幕可用工作区宽度:" + window.screen.availWidth +"px "; str += "屏幕可用工作区高度:" + window.screen.availHeight + "(屏幕分辨率高度减去了任务栏高度) " ; str += "屏幕设置的色彩:" + window.screen.colorDepth + "位彩色" +" "; str += "屏幕设置是:" + window.screen.deviceXDPI + "像素/英寸"; return str; } </script> </head> <body> <div class="oBox"></div> <div class="oBox"></div> <div id="div1"> <ul></ul> </div> </body> </html>
相关文章推荐
- js多个输入框运算计算结果输出到另一个输入框
- ThinkPHP 3.1.2 模板的使用技巧
- ThinkPHP 3.1.2 模板的使用技巧
- PreCreateWindow作用
- spring的BeanFactory原理模拟
- how to use datatables editor
- okhttp,Android网络框架学习之OKHttp
- 116. Populating Next Right Pointers in Each Node
- sql事务(Transaction)用法介绍及回滚实例
- 关于setInterval()里的this和细节
- gulp教程之gulp-htmlmin
- SQL SERVER 查询特定的前几条数据
- 特殊符号的正则表达式
- hdu4714 Tree2cycle 使一棵树变成环最小代价
- TRUNCATE TABLE 与 DELETE在删除整个表的所有记录时的区别
- 参考sqlalchemy.pool自写连接自动回收
- Mysql之数据库与sql
- js根据不一样的移动设备调整到相应的页面
- address of local variable 'pbuf' returned
- 两阶段提交