`

浅谈JS各种宽高(clientHeight、scrollHeight、offsetHeight等)

阅读更多

【前言】

    简单总结下JS常见的宽高获取方法,例如clientHeight、scrollHeight、offsetHeight等。

    先简单看个案例demo,效果图如下:


 

 

【主体】

 

一、宽高

    (1)clientHeight、clientWidth→元素宽高(height+padding,不包含边框),可以理解为元素可视区域高度

    (2)offsetHeight、offectWidth→元素宽高(height+padding+border,包含边框),可以理解为元素的可视高度

    (3)scrollHeight、scrollWidth→元素宽高(内容的实际高度+上下padding<如果没有限制div的height,即height是自适应的,那么scrollHeight=clientHeight>)

    (4)scrollHeight与offsetHeight的区别?

             offsetHeight即是自身的高度,scrollHeight是自身的高度+隐藏元素的高度(即是内层元素的offsetHeight)

 

 

二、滚动距离

   (1) offsetTop:为容器相对于document的top的绝对偏移---→等于top+margin-top

             同理offsetLeft:容器相对于document的left的绝对偏移---→等于left+margin-left

 

 

 

    (2)clientTop: 容器内部相对于容器本身的top偏移,实际就是border-width

       

    (3)scrollTop: Y轴的滚动条没有,或滚到最上时是0;Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop,当scrollTop为 0 到 scrollHeight-clientHeight  是正常的滚动距离,否则就是滚动过头了(手机上的阻尼效果)。

    

 

 

 

 

.

  • 大小: 27.6 KB
  • 大小: 25.8 KB
  • 大小: 22.2 KB
分享到:
评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

    在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前,我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...

    分析clientHeight、offsetHeight、scrollHeight

    总的来说,`clientHeight`、`offsetHeight`和`scrollHeight`是JavaScript中处理元素尺寸的重要工具,它们在网页布局、响应式设计、滚动事件处理等方面起着核心作用。熟练掌握它们的用法,是每个前端开发者必备的技能...

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    07-offsetHeight-scrollHeight-clientHeight-区别.md

    本篇文章将详细解读offsetHeight、scrollHeight、clientHeight这三个属性的概念和区别,帮助求职者和前端开发者在面试或实际工作中能更加准确地使用这些属性。 ### offsetHeight和offsetWidth属性 offsetHeight和...

    entHeight、offsetHeight 和 scrollHeight

    在JavaScript中,`...总的来说,理解和掌握`clientHeight`、`offsetHeight`和`scrollHeight`的差异是进行JavaScript页面交互和布局优化的基础,它们提供了对网页内容可视部分、总尺寸以及可滚动部分的精确控制。

    clientHeight

    ### 四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和_scrollWidth 的解析 在前端开发过程中,我们经常会遇到需要获取页面元素尺寸的情况,这其中包括了元素的高度(`...

    js获取网页宽高

    在JavaScript编程中,获取网页的宽高是一项常见的需求,特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先,我们需要...

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

    clientHeight,只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)...

    js关于不同浏览器的不同之处

    ### JavaScript 中不同浏览器下的特性差异:clientHeight, offsetHeight, scrollHeight 及其他尺寸属性 在Web开发过程中,经常会遇到需要获取元素尺寸的情况,而不同的浏览器对于这些尺寸属性的实现和计算方式存在...

    javascript获取网页宽高方法汇总.docx

    总之,JavaScript 提供了多种方式来获取网页宽高和滚动位置,但需要注意的是,这些属性在不同的浏览器中可能存在差异,因此在编写代码时,需要进行适当的浏览器兼容性检查和调整,以确保代码在各种环境下都能正确...

    javascript获取页面各种高度

    在JavaScript编程语言中,开发者经常需要获取与网页和屏幕尺寸相关的数据,比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...

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

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

    JS里各种宽度和高度的句柄

    在JavaScript(JS)中,获取和操作元素的宽度与高度是常见的需求,特别是在网页动态布局、用户交互以及响应式设计中。本主题将深入探讨如何使用JavaScript处理元素的宽度和高度,以及相关的尺寸句柄。 首先,我们有...

    js获取浏览器高度和宽度值.pdf

    2. **可见区域宽高** - `document.body.offsetWidth` 和 `document.body.offsetHeight`: 这两个属性返回`&lt;body&gt;`元素的总宽度和高度,包括边框。它们可以用于获取浏览器实际显示的页面内容宽度和高度,包括边框。 ...

    JS浏览器的高度和宽度

    ### JS 获取浏览器的高度和宽度详解 在Web开发中,经常需要获取浏览器的尺寸信息以便进行适配或调整页面布局。JavaScript 提供了多种方法来获取这些信息,不同的浏览器可能使用不同的属性来达到相同的目的。本篇...

    解决vue项目获取dom元素宽高总是不准确问题

    在Vue项目中,开发者经常需要获取DOM元素的宽高,以进行各种布局和交互的处理。然而,在实际操作中,可能会遇到获取的宽高不准确的问题,特别是在数据动态更新后。这个问题通常源于DOM元素尚未完成渲染,导致获取的...

    JS,Jquery获取各种屏幕的宽度和高度

    通过JavaScript(简称JS)和jQuery这两种工具,我们可以方便地实现这一功能。 #### JavaScript获取屏幕尺寸 在原生JavaScript中,可以通过多种方法来获取屏幕的宽度和高度,具体如下: 1. **`document.body....

Global site tag (gtag.js) - Google Analytics