`
ljzforever
  • 浏览: 116517 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js下的clientHeight/offsetHeight/scrollHeight

阅读更多
clientHeight:可见高度(不包括边框,不包括滚动条)
offsetHeight:可见高度(包括边框,包括滚动条)
scrollHeight:实际高度(不包括边框,包括滚动条)


clientWidth/offsetWidth/scrollWidth和它的道理是一样的~~

跟据我的测算边框默认宽度为1,滚动条的宽度为17


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

相关推荐

    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`是用于获取HTML元素尺寸的三个关键属性,它们在不同的浏览器环境下可能有不同的解释。理解这些属性的区别对于精确地处理网页布局和滚动行为至关重要...

    clientHeight

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

    js里取容器大小、定位、距离等属性搜集整理

    element.clientWidth //元素的实际宽度,不算边框 element.clientHeight //元素的实际高度,不算边框 element.offsetWidth //元素的实际宽度,加上边框 element.offsetHeight //元素的实际高度,加上边框 element....

    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开发过程中,经常会遇到需要获取元素尺寸的情况,而不同的浏览器对于这些尺寸属性的实现和计算方式存在...

    原生js scrollbars滚动条插件设置浏览器竖直滚动条美化

    const thumbHeight = Math.floor((clientHeight / scrollHeight) * trackHeight); scrollbarThumb.style.height = `${thumbHeight}px`; scrollbarThumb.style.top = `${scrollTop / (scrollHeight - clientHeight...

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

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

    页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    在网页开发中,准确地获取和操作页面元素的位置至关重要,这涉及到多个JavaScript和CSS属性,如`top`、`postop`、`scrollTop`、`offsetTop`、`scrollHeight`、`offsetHeight`和`clientHeight`。这些属性帮助开发者...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    ### 对offsetLeft,offsetTop,scrollLeft,scrollTop...在这个例子中,我们创建了一个宽度过长的`<div>`元素,并通过JavaScript输出了`clientHeight`, `offsetHeight`, `scrollHeight`等属性值,以便观察它们之间的区别。

    前端vue.js

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

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

    - `document.documentElement.clientHeight` 和 `document.documentElement.clientWidth`:IE6 Strict模式下使用。 - `document.body.clientHeight` 和 `document.body.clientWidth`:其他IE版本和其他浏览器使用。 ...

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

    六、clientHeight、offsetHeight 和 scrollHeight 属性 clientHeight 属性用于获取 HTML 元素的可视区域的高度。offsetHeight 属性用于获取 HTML 元素的高度,包括边框和padding。scrollHeight 属性用于获取 HTML ...

Global site tag (gtag.js) - Google Analytics