`
bejie126
  • 浏览: 2446 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript获取屏幕,浏览器,网页高度宽度

阅读更多

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: ...

    Js中关于top、clientTop、scrollTop、offsetTop.pdf

    在 JavaScript 中,有多种方式来获取网页的尺寸和位置信息,以下是对 top、clientTop、scrollTop、offsetTop 等属性的详细解释。 一、网页可见区域尺寸 * document.body.clientWidth:网页可见区域的宽度 * ...

    screen对象(教辅).pdf

    以下是一个使用 Screen 对象获取屏幕宽高的示例代码: ```html <!DOCTYPE html> <title>screen 属性 <script type="text/javascript"> console.log("屏幕宽度是:"+screen.width); console.log("屏幕...

    程序天下: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元素时,...

    让iframe自适应高度(支持xhtml)IE firefox兼容

    为了解决浏览器兼容性问题,我们可以使用JavaScript来检测浏览器的类型,然后使用相应的方法来获取页面滚动条的高度。下面是一个示例代码: ``` function getPageScroll(){ var yScroll; if (self.pageYOffset) { ...

    用javascript实现鼠标框选

    javascript可以通过浏览器的Document Object Model(DOM)来控制浏览器中的元素。我们可以使用javascript来获取鼠标的坐标,绘制矩形框,并响应用户的交互。 在本文中,我们将使用javascript来实现鼠标框选的功能。...

    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...

    不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果

    screen对象也有一些有用的属性,例如,screen.height和screen.width可以获取屏幕的高度和宽度。 3. JavaScript中的setInterval函数: setInterval函数是一个异步函数,用于在指定的时间间隔后执行某个函数。例如,...

    工程硕士学位论文 基于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框架的使用原理与应用场景出发,对最实用的...

Global site tag (gtag.js) - Google Analytics