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. 常见条码类型介绍（Code 39、Code 128、EAN-8、EAN-13、EAN-128、ISSN、TIF、TIF-14、UPC(A)、UPC(E)）

    常见条码类型,如下: 1.Code 39 Code 39,又称为"Code 3 of 9",是非零售市场中最常用的格式,用于盘存和跟踪.Code 39码编码规则简单,误码率低.所能 ...

  2. springCloud数据

    DROP DATABASE IF EXISTS springcloud_db01;CREATE DATABASE springcloud_db01 CHARACTER SET utf8;USE spr ...

  3. NX二次开发-自定义添加右键菜单RegisterConfigureContextMenuCallback

    首先声明这个知识我以前不知道,是夏天的时候看到别人在唐工的QQ群里问的,唐工说西门子官方有这个例子.那个时候我因为在忙其他事情,也就没去研究那个右键菜单到底是怎么做的.关于自定义添加右键菜单Regis ...

  4. json格式化在线工具推荐

    现在系统对接基本都采用json格式的报文,杂乱无章的json让人看起来头大,这里推荐一款在线格式化json的工具, 工具地址: http://www.matools.com/json 这个在线Json ...

  5. 可持化永久树 的 STL ( rope )

    rope 的基本操作 #include <ext/rope> using namespace __gnu_cxx; ]; rope<int> x; rope<int> ...

  6. sed 删除含有某个字符串的行 （在文件txt）

    #删除a.txt中含有“aaa”的行 sed -i “/aaa/d” a.txt

  7. Netty 源码学习——客户端流程分析

    Netty 源码学习--客户端流程分析 友情提醒: 需要观看者具备一些 NIO 的知识,否则看起来有的地方可能会不明白. 使用版本依赖 <dependency> <groupId&g ...

  8. .net 委托 +lamda表达式

    1.委托与类同级 想当于定义了一个类型 如 delegate int Sum(int a, int b);// 在声明类之前声明 2.这里可以在类里写个函数 public int sumAB(int ...

  9. bigger is greater

    题目: Lexicographical order is often known as alphabetical order when dealing with strings. A string i ...

  10. 40-Ubuntu-用户管理-05-which查看命令所在位置

    which 查看执行命令所在的位置 例: 1.查看修改用户密码的命令--passwd所在位置 which passwd 注: /etc/passwd 是用于保存用户信息的文本文件. /usr/bin/ ...