js 获取 客户区 大小
js 获取 客户区 大小
本文内容来自《javascript高级程序设计(第二版)》 内容, 只是方便大家以后可能会用到...
- <script type="text/javascript">
- function getClientPoint()
- {
- if(document.compatMode=="BackCompat")
- {
- return {
- width:document.body.clientWidth,
- height:document.body.clientHeight
- };
- }else
- {
- return {
- width:document.documentElement.clientWidth,
- height:document.documentElement.clientHeight
- };
- }
- }
- var point=getClientPoint();
- alert(point.width+"__"+point.height)
- </script>
document.compatMode 确定浏览器处于什么模式:
BackCompat:标准兼容模式关闭(混杂模式)。
CSS1Compat:标准兼容模式开启。
也就是说在获取客户区大小的时候通过判断浏览器处于一个什么模式,如果是在混杂模式里面,通过document.body获取
否则,通过document.documentElement来获取
在Safari3.1之前的版本里面不支持这个属性, 所以同样走的是 else , 这样就返回一个包含width和height属性的对象.
注意:这些属性都是只读的,而且每次访问的时候,都需要重新计算,
因此,应该尽量避免重复访问这些属性,如果需要重复使用这些属性,可以通过缓存的方式来保存(保存在局部变量里面),以便提高性能,同时还有像
offsetTop,offsetLeft,offsetWidth,offsetHeight等偏移量属性,均是只读属性,都应该尽可能避免重复访问这
些属性!
js 获取 客户区 大小的更多相关文章
- 一文看懂js中元素的客户区大小(clientWidth,clientHeight)
元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...
- 元素大小-偏移量(offset)客户区大小(client)滚动大小(scroll)
一.偏移量---offset 1.定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetPar ...
- (转)JS获取当前对象大小以及屏幕分辨率等
原文 JS获取当前对象大小以及屏幕分辨率等 <script type="text/javascript">function getInfo(){ var ...
- JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...
- 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等
效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- js获取图片原始大小
摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px ...
- JS获取元素尺寸大小、鼠标位置
//e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标 //e.offsetX|Y:表示鼠标相对于事件源对象的坐标 //e.pageX|Y:表示鼠标相对于网页的坐标 /* element.o ...
- (转)JS获取当前对象大小以及屏幕分辨率等
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...
随机推荐
- TCP中的seq
TCP连接中传送的字节流中的每个字节都按顺序编号,第一个字节的编号由本地随机产生 seq其实就是这个报文段中的第一个字节的数据编号. 例如,一段报文的序号字段值是 200 ,而携带的数据共有100字段 ...
- leetcode 从排序数组中删除重复项
最近的学习是相当的无聊,并且很无趣,每天都浪费了很多时间,比如今天下午,就是搞一手成语接龙,我也是醉了- 并且我也不知道学什么了,所以决定刷题 虽然我是0算法基础,0逻辑能力的渣渣,但是尽力每天做一道 ...
- 三张图片看懂ZKEACMS的设计思想
前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...
- 度度熊想去商场买一顶帽子,商场里有N顶帽子,有些帽子的价格可能相同。度度熊想买一顶价格第三便宜的帽子,问第三便宜的帽子价格是多少?
var data=[10,25,50,10,20,80,30,30,40,90]; function fun(arr,index){ var min=Math.min.apply(this,arr); ...
- mongodb 片键
mongodb 片键 mongodb的片键是很难控制的,没有完美的片键,只能均衡即可: 片键的方案: 1.id的hashed: 作为第一个方案,你可以使用数据文档_id的哈希作为片键. 这个方案能够 ...
- Mysql 索引原理《一》索引原理与慢查询1
为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句的优化显然 ...
- 剑指offer面试题1---赋值运算符函数
题目描述:如下类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString{public: CMyString(char* pData = NULL); C ...
- [Objective-C语言教程]块(12)
Objective-C类定义了一个将数据与相关行为相结合的对象. 有时,仅表示单个任务或行为单元而不是方法集合是有意义的. 块是C,Objective-C和C++等编程语言中的高级功能,它允许创建不同 ...
- js中的类和对象以及自定义对象
js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...
- Eclipse Java SE升级Java EE
网上教程大多是提供了“http://download.eclipse.org/releases/ganymede/”地址,但是实际更新过程中会报错. 大致查询了一下,很可能是版本不匹配的问题,正确的更 ...