<!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. 深入理解 Win32 PE 文件格式

    深入理解 Win32 PE 文件格式 Matt Pietrek 这篇文章假定你熟悉C++和Win32. 概述 理解可移植可执行文件格式(PE)可以更好地了解操作系统.如果你知道DLL和EXE中都有些什 ...

  2. Linux下安装Nginx服务器

    安装Nginx之前,首先要安装好编译环境gcc和g++,然后以CentOS为例安装Nginx,安装Nginx需要PRCE库.zlib库和ssl的支持,除了ssl外其他的我们都是去官网下载: Nginx ...

  3. WIZnet官方网盘

    之前使用过 WIZnet 的TCP/IP 解决方案,资源较少, 偶然发现此网盘,不敢独享,访问 请戳此处.

  4. Django环境搭建

    1.安装好Python 2.7.10 2.下载解压Django Django-1.9.2.tar.gz cmd cd到解压缩目录(***) python setup.py install 3.检测是否 ...

  5. [转]AndroidStudio导出jar包

    原文链接:http://blog.csdn.net/hjq842382134/article/details/38538097# 1. 不像在Eclipse,可以直接导出jar包.AndroidStu ...

  6. 比较两个mysql数据库表结构的差异

    需求来源:一个线上系统,一个开发系统,现在要把开发系统更新到线上,但是开发系统的数据库结构与线上的略有差异,所以需要找出两个数据库的表结构差异. 数据库表结构的差异 注:操作均在Linux系统下完成 ...

  7. 【python】Head First Python（五）

    无聊,看看<Head First Python>打发一下时间.感觉这本书很一般,可以无聊的时候翻翻.每一章页数很多,但都没讲什么东西. 先看第五章.记录一下知识点: f.readline( ...

  8. 甲鱼od19篇随笔

    在一个程序里会有多个对话框,这时要准确的判断要找的对话框就比较困难了所以这里就需要借助 1:Resource Hacker工具来准确的定位涉及到的对话框 2:在od中查找指令,然后在所有找到的指令上下 ...

  9. 闭包（block）

    block主要解决反向传值和传值问题 1.block申明的公式       返回值类型 (^名字)(参数列表); 2.block实现的公式       名字= ^(参数列表){}; 3.局部变量   ...

  10. Java发送邮件初窥

    一.背景 最近朋友的公司有用到这个功能,之前对这一块也不是很熟悉,就和他一起解决出现的异常的同时,也初窥一下使用Apache Common Email组件进行邮件发送. 二.Java发送邮件的注意事项 ...