三大家族(offset、scroll、client)
offset、scroll、client三大家族
offset家族
offsetWidth 与 offsetHeight
- offset 偏移
- 用于获取元素自身的位置和大小
- offsetWidth和offsetHeight获取对象自身的的宽度/高度
offsetWidth = width + border + padding; offsetHeight = height + border + padding
offsetHeight 与 style.height 的区别
得到的结果值不同
offsetHeight:获取元素的真实高度
- style.height:只能获取行内样式
style="height:100px;"
,如果样式写到了其他地方(如style代码块),甚至根本就没写,便无法获取
- 获得的值的类型不同:
offsetHeight:数值类型
- style.height:带单位的字符串
- 使用方式的不同
offseHeight:只读属性, 只能获取属性值, 不能设置元素的高度
style.height:能获取、设置行内的height属性值
offsetParent(获取元素对象)
- offsetParent: 获取最近的定位父元素 (元素自身定位参照的父元素)
- 注意点
- 如果元素自身是固定定位(fixed),则定位父级是null
- 如果元素自身是非固定定位,并且所有的父元素都没有定位,那么他的定位父级是body
- body的定位父级是null
offsetLeft 与 offsetTop
offsetLeft: 获取自己左外边框与offsetParent的左内边框的距离
offsetTop: 获取自己上外边框与offsetParent的上内边框的距离
scroll家族
scrollWidth 和 scrollHeight
- scroll 滚动
- scrollWidth 用与获取元素中内容的宽度,
- scrollHeight 用于获取元素中内容的高度
- 注意
- 当元素中的内容宽度和高度小于元素的宽高时(即内容没有溢出元素时), 获取到的scrollWidth = width | scrollHeight = height
- 当元素中的内容溢出时, scrollWidth = 内容宽 , scrollHeight = 内容高
scrollLeft 和 scrollTop
scrollTop 当元素自身的onscroll事件发生时,元素向上卷曲出去的距离
scrollLeft:当元素自身的onscroll事件发生时,元素向左卷曲出去的距离
client家族
clientWidth 和 clientHeight
- clientWidth 元素可视区域的宽度 ,边框内部的宽度,不带边框
- clientHeight 元素可视区域的高度 ,边框内部的高度,不带边框
clientLeft 和 clientTop
- clientLeft 元素左边边框的宽度(如果左边有滚动条会包含滚动条的宽度)
- clientTop 元素顶部边框的高度 (如果顶部有滚动条会包含滚动条的高度)
三大家族(offset、scroll、client)的更多相关文章
- js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...
- 三大家族,offset,scroll,client
1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
- JavaScript 特效之四大家族(offset/scroll/client/event)
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
- offset / scroll / client Left / Top
1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...
- offset,scroll,client系列
offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...
- 第52天:offset家族、scroll家族和client家族的区别
一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- client三大家族区别(三大家族总结)
目录 目录 2 今日内容: 4 第1章 第三大家族client 4 1.1 主要成员 4 1.2 三大家族区别(三大家族总结) 5 1.2.1 Width和height 5 1.2.2 top和lef ...
随机推荐
- 怎么添加在安装好的nvidia-docker上面根据Dockerfile构建自己所需要的运行环境
在已经创建好nvidia-docker环境之后,对于新手小白来说,又有一个问题了,就是如何根据Dockerfile来构建试验所需要的docker环境 主要是以下几个步骤 首先创建一个mydocker文 ...
- 响应式菜单栏: bootstrap + jQuery
bootstrap库能够很方便的实现PC和移动上的响应式操作. jQuery库大大的简化了脚本的开发: html: <html> <body> <div class='m ...
- 从Random Walk谈到Bacterial foraging optimization algorithm(BFOA),再谈到Ramdom Walk Graph Segmentation图分割算法
1. 从细菌的趋化性谈起 0x1:物质化学浓度梯度 类似于概率分布中概率密度的概念.在溶液中存在不同的浓度区域. 如放一颗糖在水盆里,糖慢慢溶于水,糖附近的水含糖量比远离糖的水含糖量要高,也就是糖附近 ...
- CDN-常用静态资源公共库
js.css 等静态资源可以放在自己的服务器上,或者引用网络上的公共库使用(CDN) CDN 读取失败时从本地加载 <script src="https://code.jquery.c ...
- Servlet学习笔记(1)
Servlet:Sun公司制订的一种用来扩展Web服务功能的组间规范. 第1部分 C/S和B/S介绍 1 C/S Client Server 客户端 服务器程序: 客户端需要单独开发,用户需要下载并安 ...
- MVC系统过滤器 OutputCacheAttribute
命名空间: System.Web.Mvc程序集: System.Web.Mvc(在 System.Web.Mvc.dll 中) 一.MVC缓存简介 缓存是将信息(数据或页面)放在内存中以避免频繁的 ...
- vue 开发和生产的跨域问题
开发阶段 在开发环境与后端调试的时候难免会遇到跨域问题,在 vue 项目中常用的是 proxyTable,这个用起来很方便. 打开 config 文件夹下面的 index.js,找到 dev 开发模式 ...
- HDU-1028 Ignatius and the Princess III(生成函数)
题意 给出$n$,问用$1$到$n$的数字问能构成$n$的方案数 思路 生成函数基础题,$x^{n}$的系数即答案. 代码 #include <bits/stdc++.h> #define ...
- C# MVC分页简单介绍
ASP.NET MVC中进行分页的方式有多种,这里介绍一种简单实用的方法 一:在实现分页之前,先添加“PagedList”和“PagedList.Mvc”两个组件,具体下载直接在NuGet程序包里收索 ...
- RabbitMQ资料
安装以及网页插件: https://www.cnblogs.com/longlongogo/p/6489574.html Exchange详解: https://www.cnblogs.com/jul ...