`
ppju
  • 浏览: 77820 次
  • 性别: 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 三大元素知识点总结

    在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结,有需要的朋友们可以学习下。

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

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

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

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

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

    HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性:  第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent  第...

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

    javascript的offset、client、scroll在使用过程中非常频繁,接下来将对此进行一一介绍,需要了解的朋友可以详细参考下

    javascript必修课_offset,client,scroll家族

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

    JS中offset和匀速动画详解

    我们知道,三大家族包括:offset/scroll/client。今天来讲一下offset,以及与其相关的匀速动画。 offset的中文是:偏移,补偿,位移。 js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括: ...

    移动端 日期,树...等控件的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', '...

    blog:SHERlocked93 的个人博客 :zany_face:

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

    JavaScript基础整理

    本人学习前端时的总结笔记,包含数据类型、循环结构、分支结构、函数预解析、常用内置对象方法、浏览器兼容问题、offset系列、scroll系列、client系列。 是什么原型、原型的作用、原型链 继承: 1、什么是借用构造...

    JS制作网页特效-学习笔记

    JS的实用教程,传智播客...包括:轮播图、匀速动画、缓动动画、浏览器可视区域操作、固定导航栏、楼层切换、鼠标跟随、放大镜效果、拖拽对话框、事件冒泡、正则表达式等等,并介绍了三大家族:scroll、client、offset

    获取dom元素那些讨厌的位置封装代码

    你还在为offset,scroll,inner,client,screen,mouse发愁吗? 头都大了。而且各个浏览器方法还不太一样。所以往往很浪费我们的时间。 于是我产生了写一个方法用户 专门获取这样的数据。

    JQuery之拖拽插件实现代码

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client、一会offset、一会scroll。再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的。

    js浏览器滚动条卷去的高度scrolltop(实例讲解)

    1、之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值,不能通过属性修改元素的样式 2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个...

    JavaScript权威指南

    Part II: Client-Side JavaScript Chapter 12. JavaScript in Web Browsers Section 12.1. The Web Browser Environment Section 12.2. Embedding JavaScript in HTML Section 12.3. Execution of ...

    详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    关于元素的一些属性 在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些: 尺寸相关:offsetHeight、...

Global site tag (gtag.js) - Google Analytics