元素偏移量offset系列（附实例）

offset概述

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

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

offset系列常用属性：

element.offsetparent

返回作为该元素带有定位的父级元素，如果父级元素没有定位则返回body

element.offsetTop

返回元素相对带有定位父级元素上方的偏移

element.offsetLeft

返回元素相对带有相对定位父级元素左边框

element.offsetWidth

返回自身包括padding、边框、内容区的宽度，返回数值不带单位

element.offsetHeight

返回自身包括padding、边框、内容区的高度，返回数值不带单位

例：

位置

// 它以带有定位的父亲为准，如果没有则以body为准
console.log(son.offsetLeft);

大小

//可以得到元素的大小宽度、高度  是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);

返回父亲

// 返回带有定位的父亲  否则返回的是bodyconsole.log(son.offsetParent);// 返回父亲  是最近一级的父亲 亲爸爸 不管父亲有没有定位console.log(son.parentNode);

offset与style的区别

offset

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

style

style只能得到行内样式表中的样式值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用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
文章目录 1. offset概述 2. offset与style的区别 1. offset概述 offset就是偏移量,我们使用offset系列相关属性可以动态的得到该属性的位置(偏移).大小等. e ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
offset元素偏移量
offset元素偏移量 offset: 偏移量,利用offset可以动态的获取元素在页面中的位置.大小信息. 属性功能 element.offsetLeft 返回元素相对带有定位父元素左方的偏移 e ...
redis详细介绍附实例代码--看一篇就够了
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html redis介绍详解附实例代码- ...
php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
从零开始的AI·决策树原来这么好理解（附实例代码）
从零开始的AI系列从零开始的AI·机器学习の基本概念从零开始的AI·吃透kNN算法,学完我悟了(附实例代码) 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码) 文章目录从零开始的AI系列前言 ...
从零开始的AI·朴素贝叶斯？拿来吧你（附实例代码）
从零开始的AI系列从零开始的AI·机器学习の基本概念从零开始的AI·吃透kNN算法,学完我悟了(附实例代码) 从零开始的AI·决策树原来这么好理解(附实例代码) 文章目录从零开始的AI系列前言 ...

元素偏移量offset系列（附实例）

元素偏移量offset系列（附实例）相关推荐

最新文章

热门文章