java offset函数的使用方法_js的offset是什么意思及使用详解

本文详细介绍了JavaScript中Offset系列属性的功能和使用方法,包括offsetWidth、offsetHeight、offsetLeft、offsetTop及offsetParent等,并对比了它们与style属性的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

offset的意思为“偏离、位移”,在js中属于一个系列属性,包括有“offsetHeight”、“offsetWidth”、“offsetLeft”、“offsetTop”、“offsetParent”;它们可以用于获取元素尺寸。

d7b280690344e27ca7b808d9ef7ea60a.png

offset家族

1, offsetWidth offsetHeight 得到对象的宽和高(自己的宽和高)offsetWidth = width + border + padding;

offsetHeight = height + border + padding;

p.style.width 只能得到行内样式的数值

2, offsetLeft和offsetTop 返回距离上级盒子(带有定位)的左边和上边的位置,

如果父级没有定位, 则以body为准, 这里的父级指的是所有上一级, 不仅仅是父亲,

offsetLeft 从父亲的padding开始算, 父亲的border不算

3, 动画缓动公式var start=0, end = 0;

setInterval(function(){

start = start + (end - start)/10;

}, 30);

4, offsetParent 返回对象的父级(带有定位的父级) 和parentNode类似, 没有定位时, 返回body

区别:parentNode一定是父亲, offsetParent可以是爸爸, 爷爷等

5, offsetTop, offsetLeft和style.top, style.left的区别

5.1 offsetTop, offsetLeft可以是没有定位的盒子距离上边或者左侧的位置

5.2 style.top, style.left只有定位的盒子, 才有top或者left

5.3 offsetTop返回的是数字, 而style.top返回的是字符串, 除了数字外还有单位:px

5.4 offsetTop 只读, 而style.top可读写

5.5 如果没有给html元素指定过top样式, 则 style.top返回的是空字符串

5.6 style.width 只能得到行内样式的数值

相关推荐:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值