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. 线程池——Executors

    一 Executor框架 为了更好地控制多线程,JDK提供了一套线程框架Executor,帮助开发人员有效的进行线程控制.它们都在java.util.concurrent包中,是JDK并发包的核心.其 ...

  2. Shiro学习（15）单点登录

    Shiro 1.2开始提供了Jasig CAS单点登录的支持,单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即可访问这些系统中的任何一个,无须多次登录.此处我们使用Ja ...

  3. luoguP1313 [NOIp2011]计算系数 [组合数学]

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  4. AcWing 201. 可见的点 （欧拉函数打表）打卡

    在一个平面直角坐标系的第一象限内,如果一个点(x,y)与原点(0,0)的连线中没有通过其他任何点,则称该点在原点处是可见的. 例如,点(4,2)就是不可见的,因为它与原点的连线会通过点(2,1). 部 ...

  5. java 后台 实现简单的验证码

    private int width =80;private int height=30;private Random r=new Random();private String fontnames[] ...

  6. 解决Office 2010 每次打开word时出现配置进度框

    来自百度经验 装好Office 2010后,每次打开都会出现配置进度框,很烦人,怎么办呢 确认你的10版Office已激活,激活状态如图(激活工具一般在你下载的安装包里都有) 直接在”开始“运行框里输 ...

  7. MySQL数据库（三）—— 表相关操作（二）之约束条件、关联关系、复制表

    表相关操作(二)之约束条件.关联关系.复制表 一.约束条件  1.何为约束 除了数据类型以外额外添加的约束 2.约束条件的作用 为了保证数据的合法性,完整性 3.主要的约束条件 NOT NULL # ...

  8. C# 简单的往txt中写日志,调试时很有用

    原文 http://blog.csdn.net/hejialin666/article/details/6106648 有些程序在调试时很难抓住断点(如服务程序),有些程序需要循环无数次,要看每一次或 ...

  9. laydate box-sizingCSS就会变形

    *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;/* box-sizing:border-box; */} 解决:在/laydat ...

  10. mtv 与mvc

    1.MVC与MTV模型 MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型 ...