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

企鹅博客
企鹅博客
企鹅博客
28606
文章
0
评论
2020年9月15日18:04:04 评论 4 views 876字阅读2分55秒

本文主要和大家分享js中offset使用详解,主要以简单的代码和大家分享,希望能帮助到大家。

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教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
AjaxUpLoad.js实现文件上传的实例代码 js教程

AjaxUpLoad.js实现文件上传的实例代码

本文主要为大家详细介绍了AjaxUpLoad.js实现文件上传的具体代码,具有一定的参考价值,希望能帮助到大家。 AjaxUpload.js文件的代码,供大家参考,具体内容如下 /** * AJAX ...
JS延时器提示框的应用实例代码解析_javascript技巧 js教程

JS延时器提示框的应用实例代码解析_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: 延时显示提示框 延时提示框 延时提示框编写时需要注意的点都记录在注释当中,逐个对照注意一下,这个功能看过视频教程之后实现起来比较顺畅,原因是在编写...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: