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. 虚拟化 - VirtualBox

    安装 win10上如果要使用VirtualBox安装64位系统(如Ubuntu),那么就要: CPU.主板支持虚拟化技术 打开主板BIOS上的虚拟化开关(前提是前面说的CPU.主板支持虚拟化技术) 不 ...

  2. 21天学通C++学习笔记(九):类和对象

    1. 类和对象 现实中的人等事物往往具备一些特征并且可以做某些事情,要在程序中模拟这些事物,需要一个结构,将定义其属性(数据)以及其可用这些属性执行的操作(函数)整合在一起.这种结构就是类,而这种结构 ...

  3. C# 异常日志记录

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web; na ...

  4. leetcode 45. 跳跃游戏 II JAVA

    题目: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [2,3,1,1, ...

  5. form表单 相同name 多个value 的后台接受问题

    使用ajax序列化传到后台. data : $("#formid").serialize(); public void fun(@Valid Vo vo){} 使用vo的数组字段属 ...

  6. linux命令之文件系统管理命令(下)

    1.mount:挂载文件系统 该命令可以将指定的文件系统挂载到指定目录(挂载点),在linux中必须先挂载所有的设备,才能够访问,挂载的目录必须事先存在并且最好为空. 参数 说明 -t(常用) 指定挂 ...

  7. 691. Stickers to Spell Word

    We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...

  8. POJ3322Bloxorz I

    POJ3322 Bloxorz I 暴搜,next数组与处理一下(小技巧) #include <cstdio> #include <iostream> #include < ...

  9. vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问

    我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用http://localhost:8081/访问的挺好的,但是换到ip就访问不了,期初我以为是代理的原因,将 ...

  10. js 自定义获得类class和获得id

    使用js获取类名,但是低版本浏览器不支持getElementsByClassName,所以我们就需要自定义getClassName,方便跨浏览器使用. 当然,如果采用jquery就不需要. //获取类 ...