首页 > web前端 > js教程 > 正文

js的offset是什么意思及使用详解

小云云
发布: 2020-09-04 17:44:22
原创
13117 人浏览过

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

js的offset是什么意思及使用详解

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  只能得到行内样式的数值

相关推荐:

php中offset特征造成绕过漏洞解决方法

JS中offset和匀速动实例分析

mysql分页时offset过大的Sql优化实例分享

以上是js的offset是什么意思及使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!