DOM中offsetLeft与style.left的区别
offsetLeft 获取的是相对于父对象的左边距
left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,
这同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的位置。
DOM中offsetLeft与style.left的区别的更多相关文章
- offsetLeft和style.left的区别
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...
- offsetLeft与style.left的区别
参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定 ...
- offsetleft 和 style.left 的区别
offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为rel ...
- DOM中的node与element的区别
先看document的两个常见method. document.createTextNode Constructor: Text document.createElement Constructor: ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- offsetLeft与style.left区别
在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...
- JS中offsetLeft,Left,clientLeft的区别(纯转贴)
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- DOM 中 Property 和 Attribute 的区别
原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...
随机推荐
- 【MySQL】【3】String和Date相互转换
正文: 1,Date转String --结果:<2019-04-10> SELECT DATE_FORMAT(SYSDATE(), "%Y-%m-%d") FROM D ...
- 纯css实现顶部进度条随滚动条滚动
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...
- sqlite3 查询表
cx = sqlite3.connect("c:/数据库地址") # 打开数据库cu = cx.cursor()# query the tablerows = cu.execute ...
- PostgreSQL&PostGIS完全安装
检查PostGIS.PostgreSQL.GEOS.GDAL.PROJ等各软件的版本依赖关系 http://trac.osgeo.org/postgis/wiki/UsersWikiPostgreSQ ...
- [poj 2453] An Easy Problem
An Easy Problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8371 Accepted: 5009 D ...
- noip2016组合数问题
题目描述 组合数 Cnm 表示的是从 n 个物品中选出 m 个物品的方案数.举个例子,从 (1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3) 这三种选择方法.根据组合数的 ...
- Windows系统目录解释
目录 说明 C:\Program Files 64位程序安装目录 C:\Program Files (x86) 32位程序安装目录 C:\Windows 操作系统主要目录 C:\Windows\Sys ...
- EventBus简单封装
前言 以前每个页面与每个页面业务逻辑传递让你不知所措,一个又一个接口回调,让你晕头转向,一个又一个参数让你混乱不堪.EventBus一个耦合度低的让你害怕的框架. 什么是EventBus EventB ...
- AI工具5.13
如果想选中上面的很多图形,可以锁定不需要选择的下面的图形.选择需要锁定的对象.“对象”“锁定”“所选对象” “对象”“变换”“再次变换”快捷键“ctrl=d"一般前面有其他操作如“移动”“复 ...
- centos6.5 安装php-5.6.31
1 从PHP官网下载所需要的PHP版本 下载地址: http://php.net/get/php-5.6.31.tar.gz/from/a/mirror 把下载好的文件上传到服务器 2 安装PHP ...