JS——offset
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的更多相关文章
- js offset系列属性
offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...
- js offset
1.offsetParent offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果 ...
- 【前端】之JavaScript基础知识
JS 基础知识 JS中,简单类型的数据存储在栈中,复杂类型的数据存储在堆中,其引用存储在栈中 JS中的深拷贝和浅拷贝: 浅拷贝:将对象中的所有简单类型的属性拷贝出来,引用类型属性直接赋值null 深拷 ...
- jquery的offset().top 和position().top 详解 和如何用js实现
1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...
- (转)详解JS位置、宽高属性之一:offset系列
很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...
- JQ的offset().top与js的offsetTop区别详解
一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- JS学习 - offset家族(一)
JS学习 - offset家族(一) 先来张图开开胃 offsetWidth offetHeight 得到对象的宽度和高度(自己的,与他人无关) offsetWidth = width + borde ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
随机推荐
- [K/3Cloud]K3Cloud的移动审批方面
基于最新的K3Cloud2的SP2,当前K3Cloud上所有的工作流都可以在移动手机上进行移动审批,具体如下: K/3 Cloud 支持移动审批,支持安卓和IOS. 关于申请试用: 1.打开浏览器,进 ...
- jquery ajax报Uncaught TypeError :Illegal invocation
使用jquery ajax异步提交的时候报Uncaught TypeError :Illegal invocation错误,报错信息如图: 上网查了一下jquery的这个错误,导致这个错误的原因有俩点 ...
- spark之scala快速入门
scala和java都是在jvm之上的语言,相对来讲,scala热度比较低,其实并不是一个特别好的语言选择. 原因倒不是因为scala本身的缺点,而是使用人群不够多,论坛和社区不够活跃.这就跟社交软件 ...
- 作DJANGO ORM时的一些最佳实践
还是国外的正规,都在作DJANGO ORM的解藕化工作了. 外键不用,多对多,一对多,不用. 参考URL: http://scottlobdell.me/2015/01/sql-database-be ...
- [bzoj1878][SDOI2009]HH的项链_莫队
HH 的项链 bzoj-1878 SDOI-2009 题目大意:给定一个n个数的序列.m次询问,每次询问一段区间内数的种类数. 注释:$1\le n\le 5\cdot 10^4$,$1\le m\l ...
- memory management in oracle 11G R2
When we talking about memory management in Oracle, we are refering to SGA and PGA. The management me ...
- NIO框架之MINA源代码解析(二):mina核心引擎
NIO框架之MINA源代码解析(一):背景 MINA的底层还是利用了jdk提供了nio功能,mina仅仅是对nio进行封装.包含MINA用的线程池都是jdk直接提供的. MINA的server端主要有 ...
- volatile限定符
volatile关键字是一种类型修饰符,用它声明的类型变量表示可以被某些编译器未知的因素更改,比如:操作系统.硬件或者其它线程等.由于访问寄存器的速度要快过RAM,所以编译器一般都会作减少存取外部RA ...
- SPOJ 962 Intergalactic Map (网络最大流)
http://www.spoj.com/problems/IM/ 962. Intergalactic Map Problem code: IM Jedi knights, Qui-Gon Jinn ...
- 频繁模式挖掘 Apriori算法 FP-tree
啤酒 尿布 组合营销 X=>Y,其中x属于项集I,Y属于项集I,且X.Y的交集等于空集. 2类算法 Apriori算法 不断地构造候选集.筛选候选集来挖掘出频繁项集,需要多次扫描原始数据.磁盘I ...