offset、scroll、client三大家族

offset家族

offsetWidth 与 offsetHeight

  1. offset 偏移
  2. 用于获取元素自身的位置和大小
  3. offsetWidth和offsetHeight获取对象自身的的宽度/高度 offsetWidth = width + border + padding; offsetHeight = height + border + padding
  4. offsetHeight 与 style.height 的区别

    • 得到的结果值不同

      • offsetHeight:获取元素的真实高度

      • style.height:只能获取行内样式style="height:100px;",如果样式写到了其他地方(如style代码块),甚至根本就没写,便无法获取
    • 获得的值的类型不同:
      • offsetHeight:数值类型

      • style.height:带单位的字符串
    • 使用方式的不同
      • offseHeight:只读属性, 只能获取属性值, 不能设置元素的高度

      • style.height:能获取、设置行内的height属性值

offsetParent(获取元素对象)

  1. offsetParent: 获取最近的定位父元素 (元素自身定位参照的父元素)
  2. 注意点
    • 如果元素自身是固定定位(fixed),则定位父级是null
    • 如果元素自身是非固定定位,并且所有的父元素都没有定位,那么他的定位父级是body
    • body的定位父级是null

offsetLeft 与 offsetTop

  1. offsetLeft: 获取自己左外边框与offsetParent的左内边框的距离

  2. offsetTop: 获取自己上外边框与offsetParent的上内边框的距离

scroll家族

scrollWidth 和 scrollHeight

  1. scroll 滚动
  2. scrollWidth 用与获取元素中内容的宽度,
  3. scrollHeight 用于获取元素中内容的高度
  4. 注意
    • 当元素中的内容宽度和高度小于元素的宽高时(即内容没有溢出元素时), 获取到的scrollWidth = width | scrollHeight = height
    • 当元素中的内容溢出时, scrollWidth = 内容宽 , scrollHeight = 内容高

scrollLeft 和 scrollTop

  1. scrollTop 当元素自身的onscroll事件发生时,元素向上卷曲出去的距离

  2. scrollLeft:当元素自身的onscroll事件发生时,元素向左卷曲出去的距离

client家族

clientWidth 和 clientHeight

  1. clientWidth 元素可视区域的宽度 ,边框内部的宽度,不带边框
  2. clientHeight 元素可视区域的高度 ,边框内部的高度,不带边框

clientLeft 和 clientTop

  1. clientLeft 元素左边边框的宽度(如果左边有滚动条会包含滚动条的宽度)
  2. clientTop 元素顶部边框的高度 (如果顶部有滚动条会包含滚动条的高度)

三大家族(offset、scroll、client)的更多相关文章

  1. js三大家族offset,scroll,cliennt的区别

    offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...

  2. 三大家族,offset,scroll,client

    1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法)    clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...

  3. JavaScript 特效之四大家族(offset/scroll/client/event)

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  4. offset / scroll / client Left / Top

    1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...

  5. offset,scroll,client系列

    offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...

  6. 第52天:offset家族、scroll家族和client家族的区别

    一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...

  7. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  8. offset、client、scroll开头的属性归纳总结

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

  9. client三大家族区别(三大家族总结)

    目录 目录 2 今日内容: 4 第1章 第三大家族client 4 1.1 主要成员 4 1.2 三大家族区别(三大家族总结) 5 1.2.1 Width和height 5 1.2.2 top和lef ...

随机推荐

  1. 怎么添加在安装好的nvidia-docker上面根据Dockerfile构建自己所需要的运行环境

    在已经创建好nvidia-docker环境之后,对于新手小白来说,又有一个问题了,就是如何根据Dockerfile来构建试验所需要的docker环境 主要是以下几个步骤 首先创建一个mydocker文 ...

  2. 响应式菜单栏: bootstrap + jQuery

    bootstrap库能够很方便的实现PC和移动上的响应式操作. jQuery库大大的简化了脚本的开发: html: <html> <body> <div class='m ...

  3. 从Random Walk谈到Bacterial foraging optimization algorithm(BFOA),再谈到Ramdom Walk Graph Segmentation图分割算法

    1. 从细菌的趋化性谈起 0x1:物质化学浓度梯度 类似于概率分布中概率密度的概念.在溶液中存在不同的浓度区域. 如放一颗糖在水盆里,糖慢慢溶于水,糖附近的水含糖量比远离糖的水含糖量要高,也就是糖附近 ...

  4. CDN-常用静态资源公共库

    js.css 等静态资源可以放在自己的服务器上,或者引用网络上的公共库使用(CDN) CDN 读取失败时从本地加载 <script src="https://code.jquery.c ...

  5. Servlet学习笔记(1)

    Servlet:Sun公司制订的一种用来扩展Web服务功能的组间规范. 第1部分 C/S和B/S介绍 1 C/S Client Server 客户端 服务器程序: 客户端需要单独开发,用户需要下载并安 ...

  6. MVC系统过滤器 OutputCacheAttribute

    命名空间:  System.Web.Mvc程序集:  System.Web.Mvc(在 System.Web.Mvc.dll 中) 一.MVC缓存简介 缓存是将信息(数据或页面)放在内存中以避免频繁的 ...

  7. vue 开发和生产的跨域问题

    开发阶段 在开发环境与后端调试的时候难免会遇到跨域问题,在 vue 项目中常用的是 proxyTable,这个用起来很方便. 打开 config 文件夹下面的 index.js,找到 dev 开发模式 ...

  8. HDU-1028 Ignatius and the Princess III(生成函数)

    题意 给出$n$,问用$1$到$n$的数字问能构成$n$的方案数 思路 生成函数基础题,$x^{n}$的系数即答案. 代码 #include <bits/stdc++.h> #define ...

  9. C# MVC分页简单介绍

    ASP.NET MVC中进行分页的方式有多种,这里介绍一种简单实用的方法 一:在实现分页之前,先添加“PagedList”和“PagedList.Mvc”两个组件,具体下载直接在NuGet程序包里收索 ...

  10. RabbitMQ资料

    安装以及网页插件: https://www.cnblogs.com/longlongogo/p/6489574.html Exchange详解: https://www.cnblogs.com/jul ...