`
zhangyong1988
  • 浏览: 1233 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

JS scrollLeft, scrollWidth, clientWidth, offsetWidth 详解

    博客分类:
  • 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

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

  • 大小: 17 KB
0
1
分享到:
评论

相关推荐

    JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    在JavaScript中,理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关,尤其在处理滚动条和元素可视区域时...

    scrollwidth和offsetwidth区别

    ScrollWidth 与 OffsetWidth 之间的区别 ScrollWidth 和 OffsetWidth 是两个常用的 HTML 元素属性,它们都是用于获取或设置 HTML 元素的宽度,但是它们之间存在着一些关键的差异。 首先,让我们来了解一下这两个...

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    在JavaScript中,`scrollLeft`, `scrollWidth`, `clientWidth`, `offsetWidth` 等属性是处理元素尺寸和滚动位置的重要工具。这些属性各自代表着不同的意思,在实际开发中有着广泛的应用。 `scrollLeft` 属性用于...

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    ### HTML:scrollLeft, scrollWidth, clientWidth, offsetWidth 完全详解 #### 一、scrollHeight 和 scrollWidth **scrollHeight** 和 **scrollWidth** 分别用来获取一个元素的滚动高度和滚动宽度。 - **...

    offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示

    在Web开发中,理解和掌握DOM元素的尺寸与位置属性至关重要,特别是`offsetWidth`、`clientWidth`、`scrollWidth`、`scrollTop`和`scrollLeft`这些属性。它们提供了关于元素几何特性的详细信息,有助于实现精确的布局...

    scrollLeft,scrollTop等等详解[定义].pdf

    在JavaScript中,通过监听`scroll`事件,可以实时获取`scrollLeft`和`scrollTop`的变化,进而实现动态效果,如固定导航栏、平滑滚动等。 总结一下,`scrollLeft`、`scrollTop`、`offsetTop`、`offsetLeft`、`...

    javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    在JavaScript中,DOM元素的尺寸和位置是网页布局的关键因素,`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果,...

    JS获取各种宽度、高度的简单介绍

    本文档主要介绍了一些常用的用于获取对象尺寸的属性,包括scrollWidth、clientWidth、offsetWidth等,并对它们之间的关系进行了说明。 首先,scrollWidth和scrollHeight属性用于获取元素的滚动宽度和滚动高度。...

    js获取屏幕分辨率的方法

    ### JS 获取屏幕分辨率的方法 在Web开发中,获取用户的屏幕分辨率是实现响应式设计和优化用户体验的重要步骤之一。本文将详细介绍如何使用JavaScript来获取屏幕分辨率,并探讨这些信息如何帮助我们实现div元素的...

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

    在定位元素时,还可以使用`scrollLeft`、`scrollWidth`、`clientWidth`、`offsetWidth`等属性,以及`event`对象的相关属性,如`clientX`、`clientY`、`offsetX`、`offsetY`等,帮助我们精确地计算元素的位置和相对...

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

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

    前端vue.js

    ### 前端 Vue.js 知识点概览 #### 一、Vue.js 简介与特性 **Vue.js** 是一款用于构建用户界面的渐进式框架。它不仅能够帮助开发者快速构建单页面应用(SPA),还能作为库集成到现有项目中,这种灵活性使得 Vue 成为...

    Js中 关于top、clientTop、scrollTop、offsetTop等

    在JavaScript(简称JS)开发过程中,页面元素的位置与尺寸计算是非常常见的需求之一。尤其是在处理复杂的网页布局时,正确理解和使用`top`、`clientTop`、`scrollTop`、`offsetTop`等属性对于实现精确的页面操作至关...

    获取页面元素实际宽高的属性的使用

    本文将详细介绍`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`、`offsetHeight`等属性及其应用场景。 #### `clientWidth` 和 `clientHeight` - **定义**:`clientWidth`用于获取...

    JavaScript网页定位详解

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

Global site tag (gtag.js) - Google Analytics