一、问题总结:

样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。

让元素移动到200停止

setTimeout ( function () {
var div = document.getElementById("div4");
//var left = parseInt(div.style.left) + 5;
var left = div.offsetLeft + 5; div.style.left = left + "px";
if (left < 200) {
setTimeout( arguments.callee, 50);
} }, 50);

二、关于offsetLeft和left的区别(关于offsetLeft:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)

1.定义了position:relative或absolute属性的元素才有left属性,元素都有offsetLeft属性。

2.元素内联样式中设置了left,才能通过div.style.left获取;offsetLeft直接通过div.offsetLeft获取。

3.left可读可写,获取到的是字符串;offsetLeft只读,获取到的是数字。

相同点:定位方式一样,如果父元素设置了定位元素(position设置为relative或absolute),则相对于定位元素定位,否则就是相对于根元素定位。

三、案例:

HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近 的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

下面的span的父元素没有设置定位元素,所以该元素的offsetParent为根元素,此时的offsetTop相对于根元素定位。

<div style="width: 300px; border-color:blue;
border-style:solid; border-width:1;">
<span>Short span. </span>
<span id="long">Long span that wraps withing this div.</span>
</div> <div id="box" style="position: absolute; border-color: red;
border-width: 1; border-style: solid; z-index: 10">
</div> <script>
var box = document.getElementById("box");
var long = document.getElementById("long");
//
// long.offsetLeft这个值就是span的offsetLeft.
// span是个行内元素,它没有没absolute定位,但还是默认offserParent就是父元素,而不是根
// box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
box.style.top = long.offsetTop + document.body.scrollTop + "px";
box.style.width = long.offsetWidth + "px";
box.style.height = long.offsetHeight + "px";
</script>

如果给long的父元素添加一个定位属性,结果如下:

四、总结:

javascript中通过offsetLeft(offsetTop)方法获取元素偏移值很方便,得到的是数值;改变元素的偏移值使用style.left(top、right、bottom),通过style.left获取的是一个字符串的值,如果要通过style.left来改变元素位置,先要通过parseInt将获取到的当前left值转化为数值。

2017.1.26补充:

offsetWidth/offsetHeight

js获取Html元素的实际宽度高度:http://blog.csdn.net/makiyonn/article/details/8587353

javascript中无法通过div.style.left获取值的问题的更多相关文章

  1. JavaScript中关于页面URL地址的获取

    1 window.location.host; //返回url的主机部分,例如 www.xxx.com window.location.hostname; //返回url的主机名,例如 www.xxx ...

  2. asp.net中处理程序调用HttpContext.Current.Session获取值出错

    asp.net中处理程序调用System.Web.HttpContext.Current.Session获取Session时提示错误:未将对象引用设置到对象的实例. 解决办法:在处理程序文件类中实现I ...

  3. JavaScript中,让一个div在固定的父div中任意拖动

    1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...

  4. JavaScript 中对象解构时指定默认值

    待解构字段为原始值 正常情况下, const obj = { a: 1, b: 2, }; const { a, b } = obj; console.log(a, b); // 1 2 当被解构字段 ...

  5. JavaScript中.、[]与setAttribute()在设置属性上的区别

    .和[] javaScript.和[]既可以对所有js对象设置属性,但是对于DOM对象它设置的属性有些特殊.对于元素DOM标准属性,实现属性值的设置/更改;对于元素DOM非标准属性,仅在js中有效,在 ...

  6. 以application/json 方式提交 然后用在php中读取原始数据流的方式获取 在json_encode

    html 如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>& ...

  7. 浅谈JavaScript中的变量、参数、作用域和作用域链

    基本类型和引用类型 在JavaScript中有两种数据类型值.基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指的是可能由多个值构成的对象.在JavaScript中有5种基本数据类型 ...

  8. 【译】Javascript中的数据类型

    这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会 ...

  9. JavaScript中的innerHTML属性的使用

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

随机推荐

  1. viewBox A-Z滚动样式

    效果图:       代码实现 (其中使用了ionic框架...) html 代码: <ion-content class='page-location'> <div class=' ...

  2. Linux内核分析——分析system_call中断处理过程

    万子惠 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 我选择的是get ...

  3. 创建【哆啦A梦】风格字体

    学习canvas,为作画.对于一个毫无逻辑思维的人简直遭罪啊~想象坐标坐标坐标啊- - 好啦言归正传,基于本月16号,在春熙路IFS展出120只哆啦a梦,以及canvas的作用,在此介绍一种PS的美化 ...

  4. javascript原始数据类型compareto引用数据类型--近3天不太会的地方

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...

  5. WIN32服务程序(一):创建服务

    MSDN中有安装服务的例子Installing a Service(可点击进入),我们这里的创建服务,和MSDN里的例子基本上是一样的.这里做一些简单的说明: 打开控制面板,管理工具,服务.我们看到的 ...

  6. Eclipse的FindBugs插件

      Eclipse的FindBugs插件     问题提出: 当我们编写完代码,做完单元测试等各种测试后就提交正式运行,只能由运行的系统来检测我们代码是否有问题了,代码中隐藏的错误在系统运行的过程中被 ...

  7. 电脑重装BIOS设置中文翻译

  8. travel for django

    参考博客:http://www.cnblogs.com/wupeiqi/articles/5237672.html 一:框架的本质: 最原始的框架:服务端一个简单的socket,接收客户端发出的请求, ...

  9. hdu 2602 Bone Collector(01背包)模板

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 Bone Collector Time Limit: 2000/1000 MS (Java/Ot ...

  10. 获取Ip地址

    public static string GetClientIPv4Address() { string ipv4 = String.Empty; foreach (IPAddress ip in D ...