来源:http://www.ido321.com/911.html

html代码

   1: <body> 
   2:     <div class="father" id="father">
   3:         <h3>这是父元素,屏幕分辨率是1366*768</h3>
   4:         <div class="son" id="son">
   5:             <h3>这是子元素,祝大家国庆快乐 </h3>
   6:             <div class="grandson" id="grandson">
   7:                 <h3>这是孙子元素,祝大家国庆快乐 </h3>
   8:                 <h3>我的博客:www.ido321.com</h3>
   9:                 <h3>程序爱好者QQ群:</h3>
  10:                 <h3>259280570  </h3>
  11:                 <h3>欢迎你加入 </h3>
  12:                 <h3>国庆快乐  </h3>
  13:             </div>
  14:         </div>
  15:     </div>
  16:     <div class="data">
  17:         <h3>数据输出</h3>
  18:         <div id="data"></div>
  19:     </div>
  20: </body> 

css

   1: *
   2:     {
   3:         margin: 0 auto;
   4:     }
   5:     .father
   6:     {
   7:         width: 500px;
   8:         height: 750px;
   9:         border: 5px solid red;
  10:         float: left;
  11:     }
  12:     .son
  13:     {
  14:         width: 400px;
  15:         height: 300px;
  16:         border: 5px solid black;
  17:         margin: 20px;
  18:     }
  19:     .grandson
  20:     {
  21:         width: 150px;
  22:         height: 100px;
  23:         border: 5px solid blue;
  24:         margin: 20px;
  25:         overflow: auto;
  26:     }
  27:     .data
  28:     {
  29:         width: 600px;
  30:         height: 750px;
  31:         border: 5px solid red;
  32:         float: left;
  33:         margin-left: 15px;
  34:     }

js:

   1: window.onload = function()
   2:     {
   3:         /*获取元素对象*/
   4:         var father = document.getElementById('father');
   5:         var son = document.getElementById('son');
   6:         var grandson = document.getElementById('grandson');
   7:         var data = document.getElementById('data');
   8:         data.innerHTML = "<h3>获取视窗大小(跟窗口大小有关)</h3>";
   9:         data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";
  10:         data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"<br/>";
  11:         data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"<br/>";
  12:         data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"<br/>";
  13:         data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";
  14:         data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";
  15:         data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动条无关)</h3>";
  16:         data.innerHTML += ".son自身宽度(offsetWidth属性,包括左右边框):"+son.offsetWidth+"<br/>";
  17:         data.innerHTML += ".son自身高度(offsetHeight属性,包括上下边框):"+son.offsetHeight+"<br/>";
  18:         data.innerHTML += ".son可视宽度(clientWidth属性,不包括左右边框):"+son.clientWidth+"<br/>";
  19:         data.innerHTML += ".son可视高度(clientHeight属性,不包括上下边框):"+son.clientHeight+"<br/>";
  20:         data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";
  21:         data.innerHTML += ".grandson滚动宽度(scrollWidth属性):"+grandson.scrollWidth+"<br/>";
  22:         data.innerHTML += ".grandson滚动高度(scrollHeight属性):"+grandson.scrollHeight+"<br/>";
  23:         data.innerHTML += ".grandson可视宽度(clientWidth属性,不包括竖直滚动条和border):"+grandson.clientWidth+"<br/>";
  24:         data.innerHTML += ".grandson可视高度(clientHeight属性,不包括水平滚动条和border):"+grandson.clientHeight+"<br/>";
  25:         data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";
  26:         data.innerHTML += ".grandson被卷去的高(scrollTop属性,竖直滚动条滑到最底端):"+grandson.scrollTop+"<br/>";
  27:         data.innerHTML += ".grandson被卷去的左(scrollLeft属性,水平滚动条滑到最右端):"+grandson.scrollLeft+"<br/>";
  28:         data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";
  29:         /*
  30:         *IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop,但是Firxfox不支持这个两个属性;
  31:         *Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY,但是 IE 不支持这个两个属性;
  32:         */
  33:         var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
  34:         var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
  35:         data.innerHTML += "body网页正文部分上(window.screenTop(Y)):"+ topPos+"<br/>";
  36:         data.innerHTML += "body网页正文部分左(window.screenLeft(X)):"+ leftPos+"<br/>";
  37:         data.innerHTML += "<h3>获取屏幕分辨率</h3>";
  38:         data.innerHTML += "屏幕分辨率的高(window.screen.height):"+ window.screen.height+"<br/>";
  39:         data.innerHTML += "屏幕分辨率的宽(window.screen.width):"+ window.screen.width+"<br/>";
  40:         data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";
  41:         data.innerHTML += "屏幕分辨率的高(window.screen.availHeight):"+ window.screen.availHeight+"<br/>";
  42:         data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth):"+ window.screen.availWidth+"<br/>";
  43:         data.innerHTML += "<h3>获取.father的边框大小</h3>";
  44:         data.innerHTML += ".father上边框(clientTop):"+ father.clientTop+"<br/>";
  45:         data.innerHTML += ".father左边框(clientLeft):"+ father.clientLeft+"<br/>";
  46:         data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";
  47:         data.innerHTML += ".son到父元素上边界(offsetTop):"+ son.offsetTop+"<br/>";
  48:         data.innerHTML += ".son到父元素左边界(offsetLeft):"+ son.offsetLeft+"<br/>";
  49:     }
 
ps:浏览器对盒子的解析存在差异,所以以上得出的数据也会存在小小差异。附图一张

 
关于获取视窗大小的区别:http://www.ido321.com/906.html

JavaScript中的*top、*left、*width、*Height详解的更多相关文章

  1. javascript中parentNode,childNodes,children的应用详解

    本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助   "parentNode&qu ...

  2. JavaScript中的apply和call函数详解(转)

    每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...

  3. JavaScript中的apply和call函数详解

    本文是翻译Function.apply and Function.call in JavaScript,希望对大家有所帮助 转自“http://www.jb51.net/article/52416.h ...

  4. JavaScript中的this的指代对象详解

    在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...

  5. Javascript中的url编码与解码(详解)

    摘要 本文主要针对URI编解码的相关问题做了介绍,对url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript中和编解码相关的几对函数escape / unescap ...

  6. JavaScript 中 Property 和 Attribute 的区别详解

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  7. JavaScript中数组Array.sort()排序方法详解

    JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...

  8. Javascript中的局部变量、全局变量的详解与var、let的使用区别

    前言 Javascript中的变量定义方式有以下三种方式:1.直接定义变量,var与let均不写: a = 10; 2.使用var关键字定义变量 var a = 10; 3.使用let关键字定义变量 ...

  9. Javascript中while和do-while循环用法详解

    while循环 while 语句与 if 语句相似,都有条件来控制语句(或语句块)的执行,其语言结构基本相同:while(conditions){    statements;} while 语句与 ...

  10. JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeou ...

随机推荐

  1. 如何在服务(Service)程序中显示对话框

    原文:http://www.vckbase.com/index.php/wv/94 服务程序(Service)一般是不能和用户进行交互的,所以他一般是不能显示窗口的.要和用户进行交互(如显示窗口),我 ...

  2. mysql外键级联更新删除

    MySQL支持外键的存储引擎只有InnoDB,在创建外键的时候,要求父表必须有对应的索引,子表在创建外键的时候也会自动创建对应的索引.在创建索引的时候,可以指定在删除.更新父表时,对子表进行的相应操作 ...

  3. JAVA学习路线图---(JAVA1234)

    第一阶段-Java基础   这一阶段很重要,关系到你后面阶段的学习,所以务必把这一阶段掌握好: 如果你是0基本,我推荐一本比较好的,适合初学者看的书:明日科技的<Java从入门到精通>,最 ...

  4. Go语言博客

    http://www.cnblogs.com/concurrency/p/4293613.html#3130523

  5. Android:调试之DDMS

    DDMS 的全称是Dalvik Debug Monitor Service,是 Android 开发环境中的Dalvik虚拟机调试监控服务. 在Eclipse,项目启动了虚拟器后,右上角选择Open ...

  6. iOS 深入理解RunLoop

    RunLoop 是 iOS 和 OSX 开发中非常基础的一个概念,这篇文章将从 CFRunLoop 的源码入手,介绍 RunLoop 的概念以及底层实现原理.之后会介绍一下在 iOS 中,苹果是如何利 ...

  7. QTP不能打开或者新建FunctionLibrary的解决方法

    今天打开QTP,然后打开function library的时候,qtp窗口右下角一直都是open...状态,怀疑是qtp与其他的软件冲突了. 解决方法: 直接执行QTP安装程序,然后选择修复QTP,问 ...

  8. LA 3029 - City Game (简单扫描线)

    题目链接 题意:给一个m*n的矩阵, 其中一些格子是空地(F), 其他是障碍(R).找一个全部由F 组成的面积最大的子矩阵, 输出其面积乘以3的结果. 思路:如果用枚举的方法,时间复杂度是O(m^2 ...

  9. 安卓学习之--如何关闭所有的activity

    根据Activity的声明周期 方法1   我们知道Android的窗口类提供了历史栈,我们可以通过stack的原理来巧妙的实现,这里我们在A窗口打开B窗口时在Intent中直接加入标志 Intent ...

  10. btr_cur_t;

    /** B-tree cursor */ typedef struct btr_cur_struct btr_cur_t; /** The tree cursor: the definition ap ...