`
ppju
  • 浏览: 82198 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

html client,offset和scroll

 
阅读更多
在html中,任何一个元素都有三个表示位置和大小的对象:client,offset和scroll,每个对象都有相应的height,width,top,left属性,那么这些究竟有什么区别呢?
    client属性是指一个元素直接可以看得到不包括边框的区域,所谓的直接可以看得到不包括边框是这样的概念:不包括滚动条占据的空间(实际上,如果出现了滚动条,元素的高度不会发生变化,clientHeight则会自动减少滚动条需要占据的17个像素的高度),不包括滚动条隐藏的区域、不包括边(border)。因此,clientHeight就是这个区域的高度,而clientTop实际上就是border的高度;
    offset属性是指一个元素直接可以看得到包括边框的区域,所谓的直接可以看得到包括边框是这样的概念:不包括滚动条隐藏的区域、包括边(border)的宽度。因此,offsetHeight就是这个区域的高度,而clientTop实际上是这个区域到它的父容器的距离;
    scroll高度和元素的边框没有关系,它是实际上元素的高度,因此,如果出现了滚动条,scrollHeight可能会大于offset或client的高度。scrollTop则是元素的实际的顶部和可见的顶部这件的距离。
分享到:
评论

相关推荐

    05-offset,scroll,client.html

    05-offset,scroll,client.html

    js中offset,client , scroll 三大元素知识点总结

    本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族:offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息,窗口或元素内部的滚动距离等重要数据,对于实现页面布局和交互功能至关重要...

    三剑客:offset、client和scroll还傻傻分不清?

    在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内...

    javascript的offset、client、scroll使用方法详解

    JavaScript中的`offset`、`client`和`scroll`是一组用于获取和操作页面元素位置及大小的重要属性。这些属性在Web开发中非常常见,尤其是在处理动态布局和交互时。下面将详细讲解这些属性的含义、用途及其在不同...

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    javascript中offset、client、scroll的属性总结

    JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素尺寸和位置的重要工具。下面是对这些属性的详细解释和应用场景: 1. **offset属性**: - `offsetWidth` 和 `offsetHeight`:这两个属性返回元素...

    JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结

    主要介绍了JS前端知识点offset,scroll,client,冒泡,事件对象的应用,结合实例形式总结分析了offset,scroll,client,冒泡,事件对象相关功能、原理及操作注意事项,需要的朋友可以参考下

    javascript必修课_offset,client,scroll家族

    本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。...最后我们还会学习Jquery框架,以提高你的前端开发效率。学完本课后,你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站...

    JS中offset和匀速动画详解

    在JavaScript中,`offset`属性是用来获取或设置元素相对于其offsetParent元素的位置和尺寸的。offset家族包括`offsetWidth`、`offsetHeight`、`offsetLeft`和`offsetTop`,以及`offsetParent`,它们提供了对元素尺寸...

    前端开发中DOM对象的尺寸、位置、动画及轮播图特效解析与实战

    内容概要:本文详细介绍了前端开发中DOM对象的三种主要属性分类及其应用场景,分别是尺寸和位置属性(offset系列、client系列和scroll系列),动画函数封装及其实现方式(包括普通动画和缓动动画原理以及封装技巧),...

    前端总结.docx

    **offset、scroll 和 client 系列属性** 这些属性用于获取元素在页面上的位置和尺寸。`offset`系列提供元素相对于文档的位置,`scroll`系列涉及滚动位置,`client`系列则提供视口内的元素尺寸。 **事件流(冒泡和...

    小程序click-scroll组件设计

    Title: "小程序click-scroll组件设计" 本文将深入探讨小程序中的click-scroll...以上就是click-scroll组件的设计原理、关键功能和使用方法。通过这种方式,开发者可以更优雅地处理页面中的长内容展示,提高用户体验。

    移动端 日期,树...等控件的js插件

    Math.max(c['scroll' + b], c['offset' + b], h['client' + b], h['scroll' + b], h['offset' + b]) : (t = this.offset()) && t[k] : this.each(function () { a(this).css(k, n) }) } }); [ 'width', '...

    2021javascript面试题.docx

    1. 元素的位置和大小:offset、client 与 scroll 系列都是获取元素位置和大小的方法,offset 获取元素相对于文档的偏移量,client 获取元素相对于视窗的偏移量,scroll 获取元素的滚动距离。 2. 获取元素对象的注意...

    第十三课 DOM元素尺寸1

    总结起来,了解并熟练掌握DOM元素的`client`、`offset`和`scroll`系列属性,可以帮助前端开发者更精确地控制网页元素的布局和交互,从而提升用户体验。在实际项目中,这些知识的应用广泛且至关重要,无论是简单的...

    前端JavaScript基础学习笔记案例

    1.知识点包括:基础语法,字符串操作,object对象,DOM对象,BOM对象,offset,client,scroll对象,事件,事件流处理,函数(call,apply,bind函数),作用域,闭包(十种闭包的应用场景),面向对象,正则表达式,...

    blog:SHERlocked93 的个人博客 :zany_face:

    SHERlocked93 个人博客作品博客年终总结JavaScript20212019201920192018JS 活学活用正则表达式 2018JS 中的 offset、scroll、client 总结 2018JS 静态类型检查工具 Flow 2018JS throttle 与 debounce 的区别 2018...

Global site tag (gtag.js) - Google Analytics