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

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

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  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. sql 关系模型

    我们已经知道,关系数据库是建立在关系模型上的.而关系模型本质上就是若干个存储数据的二维表,可以把它们看作很多Excel表.直线电机厂家 表的每一行称为记录(Record),记录是一个逻辑意义上的数据. ...

  2. siege之-服务端性能测试

    官方网站http://www.joedog.org/ 有3种操作模式: 1) Regression (when invoked by bombardment)Siege从配置文件中读取URLs,按递归 ...

  3. [bzoj2752]高速公路 题解(线段树)

    2752: [HAOI2012]高速公路(road) Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2102  Solved: 887[Submit] ...

  4. delphi基础篇之数据类型之三：3.结构类型（Struct）

    3.结构类型(Struct) 结构类型在内存中存储一组相关的数据项,而不是像简单数据类型那样单一的数值.结构数据类型包括:集合类型.数组类型.记录类型.文件类型.类类型.类引用类型和接口类型等.

  5. 词表征 3：GloVe、fastText、评价词向量、重新训练词向量

    原文地址:https://www.jianshu.com/p/ca2272addeb0 (四)GloVe GloVe本质是加权最小二乘回归模型,引入了共现概率矩阵. 1.基本思想 GloVe模型的目标 ...

  6. 拾遗：关于“尾递归”- tail recursion

    定义[个人理解]: 尾递归,即是将外层得出的常量计算因子,以函数参数的形式逐层向内传递,即内层调用整合外层调用的产出,整个递归的结果最终由最内层的一次函数调用得出:而通常的递归则是外层调用阻塞.等待内 ...

  7. 20140806 交换两个数 extern “C”用法

    1.交换两个数 方法1.a+b有可能越界 a=a+b; b=a-b; a=a-b; 方法二.不会越界 a=a^b b=a^b; a=a^b;   2.extern "C"用法 ( ...

  8. C# WinfForm 控件之dev报表 XtraReport （二） 固定数据绑定

    已经子解了XtraReport的初步用法 现在再进一步了解 数据绑定 我们还是先不整高深的 先来个写死的 让我们的数据库数据可以通过报表呈现先 1.准备 还在上节基础上 只不过我把form1 中的Do ...

  9. pytest--fixure前置执行一个函数

    import pytest@pytest.fixture()def login_r(): print('登陆') @pytest.fixture()def open_browser(): print( ...

  10. ArcGis基础——动态显示面要素的面积值

    很基础,不赘述. 1.在catalog(目录)新建一个PersonalGeoDatabase(个人地理数据库),导入需要处理的Shapefile文件. 坐标系统,存储路径与命名根据自己需求设定 2.直 ...