元素偏移量offset的学习

元素偏移量offset的学习
一、offset概述
offset与style的区别

一、offset概述

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

获得元素距离带有定位父元素地位置；
获得元素自身的大小（宽度、高度）；
返回的数值都不带单位。

offset系列常用属性：

举例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.parent {width: 500px;height: 500px;margin: 100px auto;background-color: red;border: 10px solid #000;overflow: hidden;}.child {width: 300px;height: 300px;border: 1px solid #000;padding: 10px;margin: 50px 90px;background-color: green;}</style>
</head><body><div class="parent"><div class="child"></div></div><script>var child = document.querySelector('.child');var html = '';html += "offsetWidth=" + child.offsetWidth + "<br>";html += "offsetHeight=" + child.offsetHeight + "<br>";html += "offsetTop=" + child.offsetTop + "<br>";html += "offsetLeft=" + child.offsetLeft;child.innerHTML = html;</script>
</body></html>

运行效果图如下：

offset与style的区别

offset:

offset可以得到任意样式表中的样式值；
offset系列获得的数值是没有单位的；
offsetWidth包含padding+border+width；
offsetWidth等属性是只读属性，只能获取不能赋值；
要想获取元素大小位置，用offset更合适。

style:

style只能得到行内样式表中的样式值；
style.width获得的是带由单位的字符串；
style.width获得的不包含padding和border属性；
style.width是可读写属性，可以获取也可以赋值；
要想给元素更改值，需要用style来改变。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 .0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge" > >
<title>Document</title>
<style>.box {width: 200px;height: 200px;background-color: pink;padding: 10px;
</style>
</head>
<body>
<div class="box" style="width: 200px;"></div>
<script>
// offset与style的区别
var box = document.querySelector(' .box');
console.log(box.offsetWidth);
console.log(box.style.width);
// box.offsetWidth = '300px';
box.style.width = '300px';
</script>
</body>
</html>

元素偏移量offset的学习相关推荐

05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
元素偏移量 offset 系列
文章目录 offset 概述 offset 与 style 区别案例一:模态框拖拽思路: 代码实现: 案例二:京东放大镜思路:(分为三大部分) 代码实现 offset 概述 offset 翻译过 ...
元素偏移量offset
文章目录 1. offset概述 2. offset与style的区别 1. offset概述 offset就是偏移量,我们使用offset系列相关属性可以动态的得到该属性的位置(偏移).大小等. e ...
元素偏移量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的学习

元素偏移量offset的学习

一、offset概述

offset与style的区别

元素偏移量offset的学习相关推荐

最新文章

热门文章