`
ppju
  • 浏览: 79799 次
  • 性别: 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框架,以提高你的前端开发效率。学完本课后,你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站...

    前端总结.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...

    2021前端面试题精编.pdf

    获取元素宽度和高度的方式有很多,包括通过offset系列属性、client系列属性、scroll系列属性以及CSS中的`width`和`height`属性。 清除浮动的常用方法包括使用带有`clear`属性的伪元素、使用`overflow: auto;`或`...

    BOM browser objcet model.docx

    - `client`系列:`clientLeft`和`clientTop`获取元素左边框和上边框的宽度,`clientWidth`和`clientHeight`仅考虑内容区域的宽高。 - `scroll`系列:`scrollLeft`和`scrollTop`表示元素的水平和垂直滚动距离,`...

Global site tag (gtag.js) - Google Analytics