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. ajax 多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题

     多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题 浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有问 ...

  2. maven-compiler-plugin 版本错误解决方法

    项目执行Maven build后出现WARNING提示.报如信息如下,根据报错信息猜测是maven-compiler-plugin的版本信息问题 [WARNING] [WARNING] Some pr ...

  3. 三、linux基础命令

    1.已知/tmp 目录下已经存放了test.txt文件,如何执行命令才能把/mnt/test.txt拷贝到/tmp 下覆盖掉/tmp/test.txt,而让linux系统不提示是否覆盖 答:之所以会出 ...

  4. “全栈2019”Java第二十九章:数组详解(中篇)

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. maven(私库)上传jar包

    在实际开发过程中,我们经常会遇到需要引用的jar依赖,在我们公司的maven仓库不存在,这个时候我们就需要把jar上传上去,在项目中添加对应依赖就OK了. 步骤1:下载jar 在http://mvnr ...

  6. centos6装python3,并安装requests, lxml和beautifulsoup模块

     一.  安装python3并设为默认版本,与python2共存 1.下载Python3.4安装包 wget https://www.python.org/ftp/python/3.4.4/Pytho ...

  7. Flask 发布 1.0 稳定版

    简评:现在都开始版本大跃进了吗?对,别看别人,说的就是你 pipenv(名单太长,待补齐...) Flask 其实早就已经十分稳定了,而在第一个 commit 大概 8 年之后,版本号才最终反映出了这 ...

  8. jxl读取excel

    String path=""; String path2=""; File file = new File(path); File file2 = new Fi ...

  9. js控制输入框只能输入数字不能输入其他字符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. python高级(三)—— 字典和集合(泛映射类型)

    本文主要内容 可散列类型 泛映射类型 字典 (1)字典推导式 (2)处理不存在的键 (3)字典的变种 集合 映射的再讨论 python高级——目录 文中代码均放在github上:https://git ...