js 获取 客户区 大小

本文内容来自《javascript高级程序设计(第二版)》 内容, 只是方便大家以后可能会用到...

  1. <script type="text/javascript">
  2. function getClientPoint()
  3. {
  4. if(document.compatMode=="BackCompat")
  5. {
  6. return {
  7. width:document.body.clientWidth,
  8. height:document.body.clientHeight
  9. };
  10. }else
  11. {
  12. return {
  13. width:document.documentElement.clientWidth,
  14. height:document.documentElement.clientHeight
  15. };
  16. }
  17. }
  18. var point=getClientPoint();
  19. alert(point.width+"__"+point.height)
  20. </script>

document.compatMode 确定浏览器处于什么模式:

BackCompat:标准兼容模式关闭(混杂模式)。
CSS1Compat:标准兼容模式开启。

也就是说在获取客户区大小的时候通过判断浏览器处于一个什么模式,如果是在混杂模式里面,通过document.body获取
否则,通过document.documentElement来获取

在Safari3.1之前的版本里面不支持这个属性, 所以同样走的是 else ,  这样就返回一个包含width和height属性的对象.

  注意:这些属性都是只读的,而且每次访问的时候,都需要重新计算,
因此,应该尽量避免重复访问这些属性,如果需要重复使用这些属性,可以通过缓存的方式来保存(保存在局部变量里面),以便提高性能,同时还有像
offsetTop,offsetLeft,offsetWidth,offsetHeight等偏移量属性,均是只读属性,都应该尽可能避免重复访问这
些属性!

js 获取 客户区 大小的更多相关文章

  1. 一文看懂js中元素的客户区大小(clientWidth,clientHeight)

    元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...

  2. 元素大小-偏移量(offset)客户区大小(client)滚动大小(scroll)

    一.偏移量---offset 1.定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetPar ...

  3. (转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  4. JS获取当前对象大小以及屏幕分辨率等...

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...

  5. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  6. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  7. js获取图片原始大小

    摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px ...

  8. JS获取元素尺寸大小、鼠标位置

    //e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标 //e.offsetX|Y:表示鼠标相对于事件源对象的坐标 //e.pageX|Y:表示鼠标相对于网页的坐标 /* element.o ...

  9. (转)JS获取当前对象大小以及屏幕分辨率等

    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...

随机推荐

  1. json 登陆协议分析

    登录方式有两种:1)用户名密码登陆,code 为 5401 (2) IMSI和TOKEN 登陆, code 为93 POST /tcpbus/mobile HTTP/1.1Host: clientac ...

  2. 菜鸟的Xamarin.Forms前行之路——共享组件

    出自:博客园-半路独行 本文出自于http://www.cnblogs.com/banluduxing 转载请注明出处. Url Description Xamarin.Social The Xama ...

  3. ftp服务器PDF文件在线查看

    曾做过电厂的项目,有一些功能需要和甲方的厂家对接,其中就有需要实现甲方ftp服务器上的PDF.JPG等文件的查看功能.就PDF文件为例,这里使用的是pdf插件,需要将参数通过链接发给ftp,获取到PD ...

  4. shell+crontab 实时服务进程监控重启

    #!/bin/sh #filename: checkProcess.sh #示例:每分钟检测httpd是否在运行,不在运行则重启 #crontab -e # 加入:*/ * * * * checkPr ...

  5. Linux环境下动态链接库的生成和使用

    使用自己封装的so时遇到了点问题,本着简便原则决定写个demo看看,顺便记录下整个过程. 1)生成so所需的文件如下: print.h #ifndef __print_h__ #define __pr ...

  6. 多继承c3算法

    一.mro mro即 method resolution order (方法解释顺序),主要用于在多继承时判断属性的路径(来自于哪个类). print(类.mro)得到属性路径按继承顺序 在pytho ...

  7. [ActionScript 3.0] 实现放大镜效果的简单方法

    //mc和bgmc是同一对象的不同实例 //mc放大的对象 //bgmc源对象 //mag放大镜 var scale:Number = 1.3;//放大倍数 mc.mask = mag; mag.st ...

  8. 关于word转化成xml,图片的转换

    当word另存为xml的时候,其中的图片会以Base64编码形式展示在xml文件的特定位置, java中操作图片转换成64位编码的方式: 可将返回的64直接放在前面的未知即可:

  9. 为 JSON 字符串创建对象

    ---------------------------页面效果---------------------------------- ---------------------------代码实现--- ...

  10. POJ3074 Sudoku

    POJ3074 Sudoku 与POJ2676相比,这一题搜索时每一步都找到最好确定的点进行枚举 对于每行.每列.每个九宫格,都分别用一个9位二进制数保存还有那些数还可以填 对于每个位置,将其所在行. ...