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

JS当前窗口高度

阅读更多

网页可见区域宽: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均无关)

网页可见区域宽: 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

分享到:
评论

相关推荐

    javascript获取窗口属性值

    ### JavaScript 获取窗口属性值 在Web开发中,JavaScript是一种广泛使用的编程语言,它能够与HTML和CSS紧密结合,为网页提供动态交互能力。其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这...

    js(javascript)子窗口和父窗口交互

    通过这种方式可以灵活地控制新打开窗口的各种属性,如宽度、高度等。下面详细介绍如何使用 `window.open()` 来实现父窗口与子窗口的数据传递。 ##### 1. 打开新窗口并传递数据 ```javascript function outPut() { ...

    JS 切换多窗口

    **JS 切换多窗口详解** 在Web开发中,JavaScript是一种强大的客户端脚本语言,它允许我们实现丰富的交互性。本文将深入探讨如何利用JavaScript来切换多个窗口,以提升用户体验和网页功能。我们将通过一个简单的示例...

    JavaScript\JS\窗口类\牛B 用层模拟可移动的小窗口

    `min` 函数通过修改窗口的高度属性来实现这一功能,同时更新阴影层和消息区的样式,以适应窗口尺寸的变化。 ### 总结 通过结合使用HTML、CSS和JavaScript,我们能够创建出具有拖动功能的小窗口,这是构建动态和...

    JavaScript弹出新窗口并控制窗口移动到指定位置的方法

    在上述代码示例中,window.open('","","width=200,height=100')用于打开一个宽度为200像素、高度为100像素的新窗口,并且没有提供URL和窗口名称。 2. 弹出窗口内容的编写:通过window.open()得到的新窗口对象(本例...

    JS模式窗口

    `showModalDialog()`函数是JavaScript的一个内建方法,它能打开一个新窗口,并且使当前窗口变为非活动状态,直到新窗口关闭。这个函数的基本语法如下: ```javascript var returnValue = window.showModalDialog...

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    在本文中,我们将深入探讨如何使用JavaScript获取浏览器高度、窗口高度、元素尺寸以及元素的偏移属性。这些都是前端开发中常见的需求,理解并掌握这些方法对于优化用户体验至关重要。 首先,我们来看如何获取浏览器...

    javascript 实现弹出小窗口

    - `height=100` 和 `width=400` 设置新窗口的高度和宽度。 - `top=0` 和 `left=0` 设置新窗口相对于屏幕的位置。 - 其他如 `toolbar=no`, `menubar=no`, `scrollbars=no` 等选项则控制是否显示工具栏、菜单栏、...

    javascript经典特效---子窗口对父窗口的操作.rar

    `window.opener`提供了对创建当前窗口的窗口的引用,允许我们在子窗口中操作父窗口的元素或者调用父窗口的函数。 子窗口对父窗口的操作主要包括以下几种: 1. 改变父窗口的URL:在子窗口中,我们可以使用`window....

    JAVASCRIPT弹出窗口大总结

    - `height`:窗口高度。 - 示例: ```javascript window.open('example.html', 'newWindow', 'width=600,height=400'); ``` - **窗口位置**: - `top`:窗口顶部距离屏幕顶部的距离。 - `left`:窗口左侧...

    javascript自定义浏览器窗口

    窗口最小化通常是将窗口高度或宽度设置为0,但为了保持可恢复性,我们通常保存窗口原始尺寸。当点击最小化按钮时,将窗口尺寸设置为最小值;点击还原按钮时,恢复到原来的大小。 ```javascript let originalWidth =...

    JavaScript得到当前窗口的所有大小值

    ### JavaScript 获取当前窗口的所有大小值 在Web开发中,经常需要获取浏览器窗口或者特定元素的尺寸信息,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取当前窗口的各种...

    asp.net常用的javascript弹出窗口代码

    #### 关闭当前窗口 ```javascript this.Response.Write("<script language='javascript'>window.close();</script>"); ``` 这段代码的功能是关闭当前打开的窗口。通常用于用户完成某个操作后自动关闭当前窗口的...

    JAVASCRIPT弹出窗口代码

    ### JavaScript弹出窗口代码详解 在网页开发过程中,有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能,这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...

    JAVASCRIPT让IFRAME框架的高度自适应

    在窗口大小调整时,我们也需要调用handleFrameLoad函数来重新设置IFRAME框架的高度,以确保IFRAME框架的高度能够自动调整以适应窗口的大小变化。 在IFRAME框架中,我们可以使用table元素来控制IFRAME框架的高度。在...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    javascript div弹出窗口 可封装为JS类

    在JavaScript编程中,"div弹出窗口"是一种常见的交互式设计,它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块,如图片画廊、表单等。在本...

    JS实现DIV高度自适应窗口示例

    标题中提到的是“JS实现DIV高度自适应窗口示例”,这表示我们要探讨如何利用JavaScript(简称JS)编写代码,使得网页中的一个特定的 DIV(即文档对象模型中的一个容器元素)能够根据浏览器窗口大小的变化而动态调整...

    玩透javascript弹出窗口

    其他参数如`height`、`width`分别设置窗口的高度和宽度,`top`和`left`设置窗口相对于屏幕的位置,`toolbar=no`等设置表示是否显示相应元素。 为了更灵活地控制弹出窗口,我们可以创建一个函数来执行`window.open`...

    jquery jscrollpane.js滚动窗口微信聊天对话框

    《使用jQuery jscrollpane.js实现滚动窗口微信聊天对话框》 在网页开发中,创建一个类似于微信聊天对话框的交互式界面是一项常见的需求。为了实现这样的功能,开发者常常会利用JavaScript库,比如jQuery,以及相关...

Global site tag (gtag.js) - Google Analytics