offsetLeft与style.left的区别
参考:http://www.cnblogs.com/woshilee/articles/1951457.html
offsetLeft 获取的是相对于父对象的左边距
left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值。如果所有父元素,子元素都没与设定定位,那么其offsetLeft是相对于浏览器本身的左边距,如果其父元素有定位,就是离其最近的父元素的距离。
总之,要用offsetLeft和style.left的时候,还是确定好定位比较好。
这同offsetLeft是相同的,区别在于:
1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,
还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在
css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。
offsetLeft则仍然能够取到,无需事先定义div的位置。
offsetLeft与style.left的区别的更多相关文章
- offsetLeft和style.left的区别
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...
- DOM中offsetLeft与style.left的区别
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...
- offsetleft 和 style.left 的区别
offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为rel ...
- android 中theme.xml与style.xml的区别
from://http://liangoogle.iteye.com/blog/1848448 android 中theme.xml与style.xml的区别: 相同点: 两者的定义相同. <r ...
- offsetLeft与style.left区别
在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...
- 04-offsetLeft和style.left的区别
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- .style, .getComputedStyle(),.currentStyle区别
1)style只能获取行间样式(写在标签里面的):能读能写 2)currentStyle是专属ie的属性,区别他返回的是最终样式 及包括行间和外链css 3)getComputedStyle是一个可以 ...
- js中的offsetLeft和style.left
(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...
- js和jq中常见的各种位置距离之offsetLeft和position().left的区别(四)
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...
随机推荐
- Linux学习之inode说明
硬盘是常见的存储设备,最小单位叫做扇区,大小512kb. 文件存储在硬盘中,文件存储最小单位叫做块,大小通常为4k. iNode用于存放文件的元信息,元信息如下: 所有者 所有组 权限 时间戳,cti ...
- [开源]C#中开源软件大汇总(外国的)
一.博客类项目 1.SubText 项目介绍:Subtext 是一个个人博客发布平台,详细的介绍请进SubText 项目分类:博客 项目license:BSD License 项目主页:http:// ...
- Python 爬虫实战5 模拟登录淘宝并获取所有订单
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 本篇内容 python模拟登录淘宝网页 获取登录用户的所有订单详情 ...
- python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建
前端回顾: 整体: - HTML - CSS - JavaScript - 基本数据类型 - for,while.. - DOM - obj = document.getElementById('.. ...
- 如何通过Mac 下的SVN拉取代码
背景:今天入职了一家新单位,用的svn,我之前一直用的win下的git和svn,然后我现在用自己的mac开发,所以有了标题的疑问 博文由来:看了几个博客写的都很繁琐,看半天才能解决我的疑问,所以自己写 ...
- 在PC端或移动端应用中接入商业QQ
前两天在做一个项目XXX的时候,遇见一个问题,在页面中需要接入企业的QQ,在查找腾讯API后无果,则请求人工服务,然后人家给一网址(就是API接口),然后你只需要登录你的QQ,然后选择相应的显示类型, ...
- 集成 SOLR 到 TOMCAT 中(傻瓜教程)
按照如下配置,整个 Solr 是绿色版的,可以将 Tomcat 目录复制到任何一个地方运行 1.下载 solr 4.3 版本 2.下载 Tomcat 7 ( 6 也可以),另外可以根据系统下载 32 ...
- Android开发:《Gradle Recipes for Android》阅读笔记(翻译)3.4——Flavor Dimensions
问题: 一个product flavor不够,你需要另一个标准去区分不同版本的app 解决方案: 在product flavor中增加flavorDimensions 讨论: 在3.2章展示了一个有三 ...
- ADO.NET详细学习笔记《一》
目录 ADO.NET和ADO的区别 ADO.NET的五大核心对象 Connection对象 Command对象 DataAdapter对象,DataSet对象 DataReader对象 [1]ADO. ...
- 【BZOJ2064】分裂 状压DP
[BZOJ2064]分裂 Description 背景:和久必分,分久必和...题目描述:中国历史上上分分和和次数非常多..通读中国历史的WJMZBMR表示毫无压力.同时经常搞OI的他把这个变成了一个 ...