document.body / document.ducumentElement /等获取高度和宽度的区别
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 /等获取高度和宽度的区别 ----转载
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 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 ...
随机推荐
- Java高并发网络编程(三)NIO
从Java 1.4开始,Java提供了新的非阻塞IO操作API,用意是替代Java IO和Java Networking相关的API. NIO中有三个核心组件: Buffer缓冲区 Channel通道 ...
- Android中attrs.xml文件的使用详解
$*********************************************************************************************$ 博主推荐 ...
- C语言新手写扫雷源代码
今天发布源代码,由于写在一个文件里非常乱,所以分三个文件写 绘图和鼠标函数graph.h /*绘图与鼠标相关函数*/ #include<graphics.h> #include <e ...
- (1)Redis 基本类型
https://redis.io/ http://redisdoc.com/ 中文 一. 库 redis默认16个库,0-15.默认端口号 6379 使用某个库 测试服务器是否连通 ping // ...
- CentOS6 图形界面(gnome)安装
CentOS6相对于CentOS5的安装有了不少的进步,有不少默认的选项可以选择,如: Desktop :基本的桌面系统,包括常用的桌面软件,如文档查看工具. Minimal Desktop :基本的 ...
- 浏览器HTTP协议请求头信息
通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.客户端向服务器发送一个请求,请求头包含请求的方法.URI.协议版本.以及包含请求修饰符.客户信息和内容的类似于MIME的消息结构 ...
- CSS3 Media Queries模板:max-width和min-width
CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...
- 【HDOJ】P5056 Boring count
题目意思是给你一个字符串和K,让你求其中有多少个字串中每个字母的出现次数不超过K次,可以等于 题目意思是很简单的,写起来也很简单,不过就是注意最后要是long long要不WA了,555~ #incl ...
- css translate/rotate 空间坐标轴
参考:https://www.cnblogs.com/zhangnan35/p/10709876.html https://www.cnblogs.com/zyrblog/p/11142624.htm ...
- Android studio的ERROR: Unable to resolve dependency for 错误
同事拷贝一份工程给我,在我这里用AS编译的时候出现这个错误.按照网上很多的方法都不行,后来终于可以. 在AS中打开FILE->Setting->gradle->,在右边service ...