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. ORM概述及常用ORM框架

    一.ORM ORM(Object-relational mapping),即对象关系映射,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.也就是说,ORM是通过使用描述对象和数据库之间映 ...

  2. scrapy-redis3

    原文链接:scrapy-redis使用以及剖析

  3. [BJOI2010] 严格次小生成树

    题目链接 一个严格次小生成树的模板题. 看到次小生成树,我们有一个很直观的想法就是先构造出来最小生成树,然后将这个最小生成树上面最大的一条边替换成和它值最相近而且比他大的边. 那么首先就是用krusk ...

  4. Mysql内置功能《四》存储过程

    存储过程 一 存储过程介绍 存储过程包含了一系列可执行的sql语句,存储过程存放于MySQL中,通过调用它的名字可以执行其内部的一堆sql 使用存储过程的优点: #1. 用于替代程序写的SQL语句,实 ...

  5. django中orm的简单操作

    数据库模型 from django.db import models # Create your models here. from django.db import models # Create ...

  6. 【Oracle】安装注意事项

    装了卸载,卸载装,一会儿缺少配置功能,一会对一些莫名的命令操作不能顺利执行.于是还是选择了重装系统.(策略,与其纠结那些个抛错命令和那些烦人的长长的日志,不如重新装系统,这个绝对是最省时间的) 1.安 ...

  7. leecode刷题(9)-- 有效的数独

    leecode刷题(9)-- 有效的数独 有效的数独 描述: 判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 ...

  8. 02. css3有哪些新特性?

    2.css3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  9. 【Leetcode】Reorder List

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...

  10. 「Nosql」Redis小记-内存解析&内存消耗篇

    *博客搬家:初版发布于 2017/08/12 18:32    原博客地址:https://my.oschina.net/sunqinwen/blog/1507171 Redis内存消耗分析 注:本文 ...