1、offsetWidth、offsetHeight返回盒子宽度和高度，包括padding与border，不包括margin

2、offsetLeft、offsetTop返回盒子距离定位盒子的x轴方向和y轴方向距离，如果没有定位盒子，则返回相对于body的距离

3、offsetParent返回距离定位盒子标签元素，如果没有定位盒子，则返回body标签元素

4、offsetLeft与style.left区别：

(1)父盒子中无定位，offsetLeft可以返回距离body的距离，同样情况，style.left返回“”；

(2)offsetLeft返回的数值，style.left返回的是数值+“px”；

(3)offsetLeft不可赋值，style.left即可赋值也可获取值

(4)style.left本身只可获取行内中的值，内联和外联是无法获取的

5、特别注意：

1、offsetWidth、offsetHeight取值时，只要div的宽和高带有小数点就会进一位

2、offsetLeft、offsetTop取值时，只要小数点逢到4就会进一位

JS——offset的更多相关文章

  1. js offset系列属性

    offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...

  2. js offset

    1.offsetParent offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果 ...

  3. 【前端】之JavaScript基础知识

    JS 基础知识 JS中,简单类型的数据存储在栈中,复杂类型的数据存储在堆中,其引用存储在栈中 JS中的深拷贝和浅拷贝: 浅拷贝:将对象中的所有简单类型的属性拷贝出来,引用类型属性直接赋值null 深拷 ...

  4. jquery的offset().top 和position().top 详解 和如何用js实现

    1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...

  5. （转）详解JS位置、宽高属性之一：offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  6. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  7. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  8. JS学习 - offset家族(一)

    JS学习 - offset家族(一) 先来张图开开胃 offsetWidth offetHeight 得到对象的宽度和高度(自己的,与他人无关) offsetWidth = width + borde ...

  9. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

随机推荐

  1. [bzoj1176]Mokia[CDQ分治]

    啃了一天论文,发现CDQ分治的原理其实很简单,大概就是这样的一类分治:将左右区间按一定规律排序后分开处理,递归到底时直接计算答案,对于一个区间,按照第二关键字split成两个区间,先处理左区间,之后因 ...

  2. A + B Problem Too

    Problem Description This problem is also a A + B problem,but it has a little difference,you should d ...

  3. 这个函数有搞头，要调试通过就差不多啦--ImpersonateActiveUserAndRun

    //Function to run a process as active user from windows service void ImpersonateActiveUserAndRun() { ...

  4. leetcode算法学习----155. 最小栈（MinStack ）

    下面题目是LeetCode算法155题: https://leetcode.com/problems/min-stack/ 题目1:最小函数min()栈 设计一个支持 push,pop,top 操作, ...

  5. Mysql 使用delete drop truncate 删除数据时受外键约束影响解决方案

    先禁用数据库的外键约束: set foreign_key_checks=0; 进行删除操作 delete.drop.truncate 恢复数据库外键约束: set foreign_key_checks ...

  6. Ubuntu下的软件一般安装在哪个文件夹里

    一般安装在/usr下,里面很多文件夹,根据文件的类型,分门别类,不是一个软件一个文件夹.以前老版本的Linux习惯放在/usr/local目录下. 部分软件放在/opt下,则是一个软件统一在一个文件夹 ...

  7. 使用jconsole监控远程JVM

    使用jconsole监控远程JVM 学习了:https://www.linuxidc.com/Linux/2015-02/113420.htm https://www.cnblogs.com/thin ...

  8. [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript

    Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows ...

  9. 异常：”未处理System.TypeLoadException“

    1.问题由来:     在敲系统时原来的已有的类都能正常的执行,可是当加入一个新的实体类CancelCard的时候系统执行时显示错误例如以下: watermark/2/text/aHR0cDovL2J ...

  10. Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密

    Javascript中双等号(==)隐性转换机制   在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...