如果父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的位置。

// 这个函数是对 一个无穷分类的 下拉框的操作,页面开始只有一个下拉框,当选中下拉框一个值后,
动态生成一个select, select的项是子分类,同时要使子分类的select框后移 20px;

[转]javascript中style.left和offsetLeft的使用的更多相关文章

  1. JavaScript中style.left与offsetLeft的区别

    今天在制作焦点轮播图的时候,遇到一个问题,在使用style.left获取图片的位置时,怎么也获取不到.换用offsetLeft就能够成功获取到了.虽然实现了我想要的效果,但是还是不甘心啊,没有找到原因 ...

  2. JavaScript中style, currentStyle和 getComputedStyle的异同

    今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...

  3. Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...

  4. javascript中无法通过div.style.left获取值的问题

    一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTim ...

  5. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. Javascript中最常用的55个经典技巧

    Javascript中最常用的55个经典技巧1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table ...

  7. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  8. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  9. javascript中的时间版运动

    前面的话 速度版JS运动是指以速度为参照,随着路程的变化,时间随之变化:而时间版JS运动是指以时间为参照,随着路程的变化,速度随着变化.相较而言,时间版JS运动更为常用.JQ的animate就是时间版 ...

随机推荐

  1. php解决下单、抽奖并发导致的库存负数的问题

    我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 if(库存数量 > 0) {     //生成订单...     sql2:库存-1 } 当没有并发 ...

  2. 细介Nigix配置与反向代理

    Nginx(发 音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下 发行.由俄罗斯的程序设计师Igor S ...

  3. nl命令很好,很强大

    指令名称:     nl - 显示文件的行数及内容 语法:    nl [OPTION]... [FILE]... 说明:    将指定文件的内容附加上行数,显示到标准输出. 当没有指定文件名或使用 ...

  4. demo_04绘制三角形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. input单选框全选与反选

    input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. centos7 更改语言

    vim /etc/locale.conf 修改 LANG="en_US.UTF-8"

  7. 复制档案或目录 linux cp命令详解

    cp (复制档案或目录) [root@linux ~]# cp [-adfilprsu] 来源档(source) 目的檔(destination)[root@linux ~]# cp [options ...

  8. Delphi 停靠技术的应用

    一.基础知识介绍 1.VCL组件的基础知识 在TWinControl类中有一个DockSite属性(boolean),它的作用是是否允许别的控件停靠在它的上面:在TControl类中有一个DragKi ...

  9. python判断一个数字是整数还是浮点数

    在网上闲逛,发现了一个python的用法

  10. 学习Swift -- 构造器(上)

    构造器(上) 构造过程是为了使用某个类.结构体或枚举类型的实例而进行的准备过程.这个过程包含了为实例中的每个存储型属性设置初始值和为其执行必要的准备和初始化任务. 构造过程是通过定义构造器(Initi ...