`
nesta13
  • 浏览: 114176 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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


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均无关)

分享到:
评论

相关推荐

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...

    JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。 网页可见区域宽:...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    40、原生JavaScript获取移动设备屏幕宽度 41、原生JavaScript完美判断是否为网址 42、原生JavaScript根据样式名称检索元素对象 43、原生JavaScript判断是否以某个字符串开头 44、原生JavaScript判断是否以某个字符串...

    Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    /**获得屏幕宽度**/ ScreenWidth: function () { return window.screen.width; }, /***获得屏幕高度**/ ScreenHeight: function () { return window.screen.height; }, /**获得浏览器***/ Browse: ...

    程序天下:JavaScript实例自学手册

    9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并...

    使用JS在Android手机上实现:点击后返回X、Y坐标的html文件

    Android系统在部分界面是不允许截图的,也就不能很容易的获取到ID、...1、js获取的坐标值和屏幕宽度、高度值,和实际值相差3倍,已全局乘以3规避; 2、由于在浏览器中运行,所以浏览器的上下工具栏的位置无法获取坐标

    javascript常用对象梳理

    熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY、FRAMESET或FRAME元素时,...

    HorizonFrontierJs:使用 Javascript 技术开发视频游戏的库

    调用屏幕宽度和高度屏幕 Screen.Canvas.width; Screen.Canvas.height; 显示鼠标 Screen.MouseShow(data); show and hide mouse Data is a Boolean value True or False that indicates whether or not the mouse...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域,即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要...

    task_anywayanyday:无论如何都要在公司测试任务

    更改浏览器窗口的宽度/高度时,布局不会失去完整性; 有必要使用块布局。 有一项服务可以搜索航空公司航班。 要开始搜索,请使用以下链接: : (返回 ID 参数,搜索状态将通过该参数轮询并要求结果)。 要获取搜索...

    app-store-web-port:将iOS 10 App Store UI端口连接到Web。 遵循高度响应的网页设计,并具有自定义的iPhone和iPad布局。 演示可用

    利用CSS3 Media Queries,该站点可根据浏览器的宽度在iPhone和iPad布局之间切换。 使用最小的javascript框架,并且包括对IE9中所有浏览器的支持。灵感我一直讨厌App Store在网络上的外观。 因此,我想尝试将App ...

    超实用的jQuery代码段

    《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。   《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...

    js使用小技巧

    s += " 屏幕可用工作区高度:"+ window.screen.availHeight; s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyCode||...

    project-notice-viewer

    FRESH LIVE项目公告查看器v1.0这是什么当有人在FRESH LIVE上支持您的项目时,您可以在广播... 建议将宽度和高度与画布尺寸相同。除此之外,保留默认设置。如果按原样保留,可能会显示“无法获取项目ID”,因此请退出

    UniGUI 说明

    3. 在浏览器端不能使用 ShowMessage() .................................................................................... 5 4. 修改工程文件,使 exe 程序编译成 dll .........................................

Global site tag (gtag.js) - Google Analytics