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/--> ...
随机推荐
- ML.NET Cookbook --- 1.如何从文本文件中加载数据?
使用ML.NET中的TextLoader扩展方法从文本文件中加载数据.你需要知道在文本文件中数据列在那里,它们的类型是什么,在文本文件中什么位置可以找到它们. 请注意:对于ML.NET只读取文件的某些 ...
- Java的进程内缓存框架:EhCache
EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache缓存的特点: 1. 快速. 2. 简单. 3. 多种 ...
- jquery事件三 -- load(), ready(), resize()以及bind()事件
例子1 ready() DOM加载完毕 load() 元素加载完毕 resize() 浏览器窗口的大小发生变化 <!DOCTYPE html> <html lang="en ...
- NSUserdefault读书笔记
作用 用来存储首选项的.本来首选项是存在磁盘上的,NSUserdefault相当于提供了一个缓存,不用每次都写文件.也就是说设置首选项以后,可以马上读出来,不必先写到磁盘中去. 定期调用synchro ...
- c#中的classes和objects一些知识【1】
首先我们需要知道面向对象语言(Object-oriented language)的三大特点:封装(Encapulation),继承(Inheritance),多态(Polymorphism). 引言: ...
- react的一些思考
在做好第一个需求之后,我接到了一个react写的产品,这让我异常的兴奋,终于能写react了 开始做的时候整体框架已经搭建好了,这让我有点小失落,我还以为我要开始搭框架了呢,没事,搭的也挺好的. 有了 ...
- 4.1、支持向量机(SVM)
1.二分类问题 在以前的博客中,我们介绍了用于处理二分类问题的Logistic Regression算法和用于处理多分类问题的Softmax Regression算法,典型的二分类问题,如图: 对于上 ...
- [八分之三的男人] POJ - 1741 点分治 && 点分治笔记
题意:给出一棵带边权树,询问有多少点对的距离小于等于\(k\) 本题解参考lyd的算法竞赛进阶指南,讲解的十分清晰,比网上那些讲的乱七八糟的好多了 不过写起来还是困难重重(史诗巨作 打完多校更详细做法 ...
- Flutter Map<String, dynamic> 、List<String> a-z 排序
字符串从 a-z 排序. Map<String, String> map = XXX, List<String> keys = map.keys.toList(); // ke ...
- 初学 spring
1.spring 开发环境,包含eclipse https://spring.io/tools3/sts/all/