元素偏移量offset

文章目录

1. offset概述
2. offset与style的区别

1. offset概述

offset就是偏移量，我们使用offset系列相关属性可以动态的得到该属性的位置（偏移）、大小等。

element.offsetParent
返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body。需要注意的是，parentNode返回的是最近一级的父亲，不管父亲有没有定位。而offsetParent返回的是带有定位的父亲。
element.offsetTop
返回元素相对带有定位父元素上方的偏移
element.offsetLeft
返回元素相对带有定位父元素左边框的偏移
element.offstWidth
返回自身包括padding，边框，内容区的宽度，返回数值不带单位
element.offsetHeight
返回自身包括padding，边框，内容区的高度，返回数值不带单位

2. offset与style的区别

offset

1.可以得到任意样式表中的样式值
2.offse系列获得的数值是没有单位的
3.offsetWidth包含padding+border+width
4.offsetWidth等属性是只读属性，只能获取不能赋值
5.更适合来获取元素大小位置

style

1.只能得到行内样式表中的样式值
2.style.width获得的是带有单位的字符串
3.style.width获得不包含padding和border的值
4.style.width是可读写属性，可以获取也可以赋值
5.style更适合给元素更改值

元素偏移量offset相关推荐

05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
元素偏移量 offset 系列
文章目录 offset 概述 offset 与 style 区别案例一:模态框拖拽思路: 代码实现: 案例二:京东放大镜思路:(分为三大部分) 代码实现 offset 概述 offset 翻译过 ...
元素偏移量offset系列及e.pageX(e.pageY)
1.offset概述注意:目标元素的父元素要有定位,否则偏移量为目标元素与body元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置案 ...
offset元素偏移量
offset元素偏移量 offset: 偏移量,利用offset可以动态的获取元素在页面中的位置.大小信息. 属性功能 element.offsetLeft 返回元素相对带有定位父元素左方的偏移 e ...
kafka专题：kafka的Topic主题、Partition分区、消费组偏移量offset等基本概念详解
文章目录 1. kafka集群整体架构 2. kafka相关元素的基本概念 2.1 主题Topic和分区Partition 2.2 kafka消息存储在哪里? 2.3 分区副本 2.4 消费组和偏移量 ...
div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"><div class="ce- ...
SpringBoot 重置 kafka 偏移量offset（kafka-0.10.1.0）
如果使用的自动提交偏移量的模式,偏移量会给到kafka或者zk进行管理,其中kafka的偏移量重置给了重新消费kafka内未过期的数据提供了机会,当消费者出错,比如消费了数据,但是中途处理失败,导致数 ...
RocketMq 消息偏移量 Offset
消息偏移量 Offset queue0 offset 0 0-20 offset 1 20-40 纠错:每条消息的tag对应的HashCode. queue1 offset 0 0-20 offset ...
php js offset,获取元素的偏移量offset实例详解
问题:如果获取元素距离文档顶部的距离?[javascript] view plain copy var rect=$('#elem')[0].getBoundingClientRect(); //获取 ...

元素偏移量offset

文章目录

1. offset概述

2. offset与style的区别

元素偏移量offset相关推荐

最新文章

热门文章