参考:http://www.cnblogs.com/rushoooooo/archive/2011/05/01/2033670.html
Javascript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度的大小
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
打印代码:
var ab1 = document.body.clientWidth ;
var ab2 = document.body.clientHeight;
var ab3 = document.body.offsetWidth ;//(包括边线的宽)
var ab4 = document.body.offsetHeight;//(包括边线的宽)
var ab5 = document.body.scrollWidth ;
var ab6 = document.body.scrollHeight;
var ab7 = document.body.scrollTop ;
var ab8 = document.body.scrollLeft ;
var ab9 = window.screenTop ;
var ab10 = window.screenLeft ;
var ab11 = window.screen.height ;
var ab12 = window.screen.width ;
var ab13 = window.screen.availHeight;
var ab14 = window.screen.availWidth ;
console.log("网页可见区域宽:="+ab1 );
console.log("网页可见区域高:="+ab2 );
console.log("网页可见区域宽:="+ab3 );
console.log("网页可见区域高:="+ab4 );
console.log("网页正文全文宽:="+ab5 );
console.log("网页正文全文高:="+ab6 );
console.log("网页被卷去的高:="+ab7 );
console.log("网页被卷去的左:="+ab8 );
console.log("网页正文部分上:="+ab9 );
console.log("网页正文部分左:="+ab10);
console.log("屏幕分辨率的高:="+ab11);
console.log("屏幕分辨率的宽:="+ab12);
console.log("屏幕可用工作区高度:="+ab13);
console.log("屏幕可用工作区宽度:="+ab14);
//------------------------------------------------//
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE,FireFox 差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
div.style.top:相对于div所在的元件的顶部距离
-------------------
技术要点
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
浏览器大小调整事件
window.onresize=funName;//当浏览器大小发生变化时调用funName函数
分享到:
相关推荐
Javascript获取页面、屏幕尺寸大小参数
javascript中获得屏幕中和浏览器中所有的尺寸方法 很全很细 包你满意 欢迎下载
这有助于您根据屏幕尺寸编写条件代码,或获取屏幕尺寸值 安装 npm install --save use-screen-size yarn add use-screen-size 例子 这是显示屏幕宽度,屏幕高度和当前屏幕模式的快速示例 import React from 'react' ...
获取屏幕的尺寸需要使用Dimensions,直接从node_mules中引入即可。
这是一个Vue套件,可帮助您根据屏幕尺寸编写条件代码,或获取屏幕尺寸值 安装 安装npm软件包: npm install --save screen-size-vue # OR yarn add screen-size-vue 在您的main.js中添加Vue插件: import Vue ...
2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
useful-JavaScript-Fragment本项目包含如下内容(还会...避免了网上常见的获取display:none元素的宽高时因盲目使待获取元素脱离文本流而导致的尺寸塌陷的问题。2、从屏幕中间放大一个元素(详见 scale_fromcenter1.htm
- 支持所有屏幕尺寸(PC、平板电脑、移动设备) - 使用来自 Admob 的横幅和插页式奖励进行广告 - 已添加 GDPR -触摸控制 - Construct 3 制造- 轻松换肤,只需使用Adobe Illustrator、Photoshop、Inkscape 等 ...
// 获得元素; box.style.width; // 200px; box.style.height; // 200px; // PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空; 2.通过计算获取元素的大小 代码如下...
用于执行屏幕尺寸相关任务的简单 Angular API。 窗口上的单个调整大小侦听器以获得最佳性能 ngIf 样式指令 绑定变量以始终反映屏幕大小 绑定回调以在屏幕更改时触发 执行一次性任务,如加载数据 创建自定义规则或...
//获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) ...
响应式控件将通过动态列可见性控件自动针对不同的屏幕尺寸优化表格的布局,从而使表格在桌面和移动屏幕上都非常有用。 安装 使用响应式获取软件的主要方法是使用。 您还可以包括的各个文件。 有关完整的详细信息,请...
Js通过浏览器对象模型(BOM)来和浏览器进行交互,可以获取屏幕尺寸,窗口大小,页面地址,历史记录等浏览器相关信息,也可以控制浏览器执行某些行为:弹出信息,页面跳转,打开窗口,关闭窗口,调整窗口大小等。...
该图表是对屏幕尺寸的响应。 通过将鼠标悬停在气泡上可以获得气泡的详细数据,用户可以通过转换为柠檬绿来验证选择了哪个气泡。 由于气泡重叠,因此决定不对每个气泡进行静态标记。: 要查看JavaScript代码,请执行...
30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟浏览器菜单 第31章(\cha31) 31.1.htm 实现md5加密 31.2....
英语修订 适用于英语A-Level学生的简单javascript闪卡程序 使用一个json数据库来过滤194个抽认卡问题=='...在所有屏幕尺寸下均响应(小尺寸图像未显示) 献给我的女儿夏洛特(Charlotte),她在封锁期间不得不忍受我!
此外,该模板包括如何处理多个 iOS 和 Android 屏幕尺寸和密度的选项卡图像的示例(查看 /assets/iphone/images 和 /assets/android/images 文件夹)。执照此代码根据 Apache 公共许可证(第 2 版)获得许可。
安装了Materialize框架并创建了网格系统,我在整个项目中都使用了该网格系统来定期检查集成内容如何缩放较小的屏幕尺寸。 创建的cards.js文件可存储一整套纸牌,包括图像,值和名称。 生成了开始游戏功能,以将...
android studio项目实例 android常用图片特效处理.zip android超炫的图片浏览器.zip Android仿美图秀秀和IOS系统的相机胶卷.zip ...获取手机屏幕尺寸的代码段.zip 获取手机通讯录的实战应用(含SIM卡中的联系人).zip