`

Js获得浏览器的基本信息窗口大小,滚动条高度(document对象)

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

-------------------

技术要点
本节代码主要使用了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文档所在窗口的当前宽度。

分享到:
评论

相关推荐

    js实现浏览器窗口大小被改变时触发事件的方法

    这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器窗口大小改变时触发事件的功能。以下是关于这一知识点的详细解析。 首先,我们了解window对象。在浏览器中,window对象表示一个...

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    JS获取浏览器窗口大小

    ### JS 获取浏览器窗口大小 在前端开发中,经常需要获取浏览器窗口的大小,以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...

    解决多种浏览器获取滚动条高度

    ### 解决多种浏览器获取滚动条高度 在网页开发过程中,我们经常会遇到与浏览器兼容性相关的问题,尤其是在处理页面滚动相关的功能时。不同的浏览器对于某些属性的实现方式可能存在差异,这就要求开发者能够编写出...

    关于获取各种浏览器可见窗口大小

    - **`document.body.clientWidth`** 和 **`document.body.clientHeight`**:这两个属性分别表示文档体的宽度和高度,不包含边框和滚动条。 - **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**...

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...

    js左侧悬浮窗口,随滚动条滚动

    在这个特定的场景中,"js左侧悬浮窗口,随滚动条滚动" 是一个常见的网页设计功能,它指的是在网页浏览时,一个窗口或侧边栏会固定在屏幕的左侧,并随着用户滚动页面而上下移动,保持始终可见。 实现这样的效果,...

    JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

    - `document.body.clientHeight`:返回网页在浏览器窗口中的可视高度,同样不包括滚动条。 - `document.body.offsetWidth`:返回网页的总宽度,包括边框。 - `document.body.offsetHeight`:返回网页的总高度,...

    JS获取浏览器的高度和宽度

    - `document.body.clientHeight` 返回BODY对象的实际高度,同样不包括滚动条和边框。 - `document.documentElement.clientWidth` 返回可见区域的宽度,即浏览器视口宽度,包括边框,但不包括滚动条。 - `document....

    js获取浏览器高度和宽度值(多浏览器)

    如果页面位于一个IFrame中,可能需要获取IFrame的尺寸而不是整个浏览器窗口的尺寸。此时,需要通过`contentWindow`或`contentDocument`属性来访问IFrame内的`window`或`document`对象。 综上所述,获取浏览器高度...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    在传统的`iframe`使用中,如果内容超过`iframe`设定的高度,会出现滚动条,或者部分内容被隐藏,用户体验并不理想。为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常...

    JS浏览器的高度和宽度

    - **`document.documentElement.clientHeight`**: 返回页面对象高度(即 BODY 对象高度加上 Margin 高度)。 #### 4. 获取其他相关信息 - **`document.body.offsetWidth`**: 返回 BODY 元素的实际宽度,包括边框和...

    根据浏览器屏幕大小高度自适应

    这个JavaScript属性返回元素的可见高度,包括内边距,但不包括滚动条和边框。对于DOM元素,例如获取页面可视区域的高度,我们可以使用`window.innerHeight`或`document.documentElement.clientHeight`。这对于动态...

    浏览器窗口属性大全

    在Web开发领域,`window`对象是核心且不可或缺的一部分,它不仅代表了浏览器窗口本身,还提供了丰富的属性和方法,允许开发者对浏览器窗口进行精细控制,实现动态交互效果。本文将详细介绍`window`对象的关键属性和...

    获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll

    在网页开发中,有时我们需要获取页面的某些特定尺寸和位置信息,例如页面高度、窗口高度以及滚动条的高度。这些信息对于实现动态布局、滚动事件处理或页面适配等任务至关重要。这里有两个JavaScript函数:`...

    JS 获取滚动条高度示例代码

    滚动条高度通常指的是用户在浏览器窗口中滚动的距离,包括垂直滚动条(scrollTop)和水平滚动条(scrollLeft)。本篇文章将重点讲解如何利用JavaScript获取垂直滚动条的高度,即`scrollTop`。 首先,我们需要理解`...

Global site tag (gtag.js) - Google Analytics