<!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 /等获取高度和宽度的区别 ----转载的更多相关文章

  1. document.body / document.ducumentElement /等获取高度和宽度的区别

    document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...

  2. js获取高度和宽度

      CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...

  3. js 获取浏览器高度和宽度值(多浏览器)(转)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  4. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. JavaScript获取浏览器高度和宽度值

    IE中:  document.body.clientWidth ==> *DY对象宽度 document.body.clientHeight ==> *DY对象高度 document.do ...

  6. 转:JS获取浏览器高度和宽度

    发现一篇好文章,汇总到自己的网站上. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> ...

  7. js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  8. 不同浏览器JS获取浏览器高度和宽度

    摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...

  9. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

随机推荐

  1. Python之调用WebService:suds

    suds官方: https://fedorahosted.org/suds/wiki/Documentation 互联网公开WSDL: http://www.webxml.com.cn/zh_cn/w ...

  2. C Primer Plus_第三章_数据和C_复习题与编程练习

    Review long代替int类型变量的原因是什么? 在您的系统中,long可以容纳比int更大的数:如果您确实需要处理更大的值,那么使用一种在所有系统上都保证至少是32位的类型会使程序的可移植性更 ...

  3. LeetCode 441 Arranging Coins

    Problem: You have a total of n coins that you want to form in a staircase shape, where every k-th ro ...

  4. 51nod 1116 K进制下的大数 (暴力枚举)

    题目链接 题意:中文题. 题解:暴力枚举. #include <iostream> #include <cstring> using namespace std; ; ; ch ...

  5. ajax鼠标滚动请求 或 手机往下拉请求

    Zepto(function($){ var url = $('.page-url').val(); var cur = false; var href_url = $('.page-url').at ...

  6. ios二维码生成

    二维码扫描现在已经有很多的库可以使用了,常用的有ZXing和ZBar.如果感兴趣的同学可以自行研究. libqrencode介绍:是一个用C语言编写的用来解析二维条形码(QR Code)的程序库,li ...

  7. cuda 初学大全

    转自:http://blog.csdn.net/augusdi/article/details/12529331 cuda 初学大全 1 硬件架构CUDA编程中,习惯称CPU为Host,GPU为Dev ...

  8. Python--常见问题解决方案

    1.如何支持中文,在第一行加上编码格式的支持: # coding=gbk +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  9. poj1733(种类并查集+离散化)

    题目链接: http://poj.org/problem?id=1733 题意: 输入n表示有一个长度为n的0,1字符串, m表示接下来有m行输入, 接下来的m行输入中x, y, even表示第x到第 ...

  10. Java注释@interface的用法

    转---------- java用  @interface Annotation{ } 定义一个注解 @Annotation,一个注解是一个类.@Override,@Deprecated,@Suppr ...