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>
document.body / document.ducumentElement /等获取高度和宽度的区别 ----转载的更多相关文章
- document.body / document.ducumentElement /等获取高度和宽度的区别
document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...
- js获取高度和宽度
CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...
- js 获取浏览器高度和宽度值(多浏览器)(转)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- JavaScript获取浏览器高度和宽度值
IE中: document.body.clientWidth ==> *DY对象宽度 document.body.clientHeight ==> *DY对象高度 document.do ...
- 转:JS获取浏览器高度和宽度
发现一篇好文章,汇总到自己的网站上. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> ...
- js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 不同浏览器JS获取浏览器高度和宽度
摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
随机推荐
- nginx和apache的一些比较
1.两者所用的驱动模式不同. nginx使用的是epoll的非阻塞模式事件驱动. apache使用的是select的阻塞模式事件驱动. 2.fastcgi和cgi的区别 当用户请求web服务的时候,w ...
- ffmpeg-20160815-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...
- codeforces 493B.Vasya and Wrestling 解题报告
题目链接:http://codeforces.com/problemset/problem/493/B 题目意思:给出 n 个 techniques,每个 technique 的值为 ai. ai & ...
- 利用冒泡对List排序
SysMenu是List集合中的类型,在这是一个菜单实体. public List<SysMenu> selfMenuSort(List<SysMenu> list) { fo ...
- Android屏幕适配dp、px两套解决办法
"又是屏幕适配,这类文章网上不是很多了吗?" 我也很遗憾,确实又是老问题.但本文重点对网上的各种方案做一个简短的总结,和具体使用方法. 若想了解具体Android设备适配的前世因果 ...
- WebFrom 的js日期控件
1.WdatePicker.js /* * My97 DatePicker 4.7 Release * License: http://www.my97.net/dp/license.asp */ v ...
- php命令行运行出现错误Call to undefined function curl_init()
在windows命令行窗口下运行php命令,需要将php.exe所在的路径添加到Path环境变量,例如C:\wamp\bin\php\php5.4.3 启动Apache服务 在命令行中输入php te ...
- ios block中引用self
__block __weak typeof(self) tmpSelf = self; ^(){ tmpSelf...... }
- 3ds max 分离对象
转换为可编辑面片,将编辑环境设置为以下状态: 选中所需面片,分离
- finla变量,方法和类
1.finla变量关键字可用于变量声明,一旦该变量被设定,就不可以再改变该变量的值,通常,有final定义的变量为常量 final关键字定义的变量必须在声明时对其进行赋值定义,final除了可以修饰基 ...