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. Linux下汇编语言学习笔记75 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  2. Ubuntu 16.04安装汇编编译器NASM

    NASM支持intel语法. 安装过程: 1.通过二进制包方式 下载: http://www.nasm.us/pub/nasm/releasebuilds/2.13/ 如果要下载其它版本可以把地址靠前 ...

  3. C#: 旋转图片到正确位置

    当从iPhone等手机上传图片到服务器后,通常需要进行旋转处理,否则在进行图片压缩.缩放处理后会丢失正确的位置信息,导致显示的图片不处于正确的位置上. 处理的做法就是读取照片的Exif信息,并旋转到正 ...

  4. vmware9.0 install ubuntu

    1)安装vmware 9.0  + 注册码2)因为是.bundle文件,执行下列命令:sudo chmod +x VMware-Workstation-7.1.1-282343.i386.bundle ...

  5. 解决多个Xcode导致的N个模拟器的问题

    <欢迎大家增加iOS开发学习交流群:QQ529560119> 完美解决多个Xcode从而导致了出现N个模拟器的问题

  6. 三问JavaBean

    曾经觉得javabenan是一些java类.后来查看了一些百科 .javabean是java组件技术,又是遵循一些约定.不是非常理解. 什么是javabean?  在jsp程序中用来封装业务逻辑,数据 ...

  7. Yii中使用RBAC全然指南

    本人小菜鸟一仅仅,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群. 希望光临本博客的人能够进来交流. ...

  8. 大写金额换算器iOS版源码

    大写金额换算器iOS版源码 人民币金额大写转换器输入数字就可以转换成相应的人民币大写金额,操作很easy,需一键点击,就可以复制. 是財务办公人员必备的小工具. 银行.单位和个人填写的各种票据和结算凭 ...

  9. adb protocol failure【转】

    本文转载自:http://blog.csdn.net/hang2/article/details/45080769 今天遇见一个现象 在Nexus4上面部分adb功能失效, 可以 adb push 到 ...

  10. Android开发常用框架汇总

    作为一名程序猿,好的工具会让你在搬运工的道路上越走越远.以下框架是AC在开发过程中经常会使用到的一些好的框架.列在这里做一个小小的总结,包含但不限于此. 响应式编程 RxJava https://gi ...