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. 【LeetCode 23】合并K个排序链表

    题目链接 [题解] 会归并排序吧? 就把这K个链表当成是K个数字就好. 然后做归并排序. 因为归并排序的时候本来就会有这么一个过程. [l..mid]和[mid+1..r]这两段区间都是有序的了已经. ...

  2. Linux环境安装PHP链接SQLserver2008

    网上很多介绍,但是跟着做总是有问题,找到一个大神的,没出现过问题: 1.首先需要编译安装FreeTDS 1.1.安装 说明:一定要从官网下载最新的版本FreeTDS-0.95 ftp://ftp.fr ...

  3. Hbase的rowkey设计

    HBase的rowKey设计技巧 1.设计宗旨与目标 主要目的就是针对特定的业务模型,按照rowKey进行预分区设计,使之后面加入的数据能够尽可能的分散于不同的rowKey中.比如复合RowKey. ...

  4. CSS中各种百分比（%）

    1.固定定位  position:absolute;width:100%;height:100%: 中%相对的   都是浏览器的可视窗口宽高. 2.标准文档流中,标签的 % 单位除了height以外, ...

  5. 使用PHP和MySQL添加数据库时的小错误及注意事项总结

    刚刚开始使用PHP和MySQL搭配着,从前端往数据库传数据,错误犯了不少,总结一下,提醒自己 1.写MySQL语句时,标点符号使用错 正确的应该是 $sql = "INSERT INTO ` ...

  6. 十折交叉验证10-fold cross validation, 数据集划分 训练集 验证集 测试集

    机器学习 数据挖掘 数据集划分 训练集 验证集 测试集 Q:如何将数据集划分为测试数据集和训练数据集? A:three ways: 1.像sklearn一样,提供一个将数据集切分成训练集和测试集的函数 ...

  7. 用java进行测试php写的接口

    <?php /* * @Author: anchen * @Date: 2018-07-06 13:53:19 * @Last Modified by: anchen * @Last Modif ...

  8. PAT_A1139#First Contact

    Source: PAT A1139 First Contact (30 分) Description: Unlike in nowadays, the way that boys and girls ...

  9. PHPStorm IDE 快捷键(MAC版)

    ⌘——Command ⌃ ——Control ⌥——Option/Alt ⇧——Shift ⇪——Caps Lock fn——功能键就是fn 编辑 Command+alt+T 用 (if..else, ...

  10. leetcode.数组.287寻找重复数-Java

    1. 具体题目 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个重复的整数.假设只有一个重复的整数,找出这个重复的数. 示例 1: ...