解决办法:

1.使用行内样式设置元素的top和left值;

2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt

问题原因:

如果父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的值需要事先定义,否则取到的值为空,而且必须是以行内样式的形式定义,如果定义在css里,style.left的值仍然为undefined;而offsetLeft则仍然能够取到,无需事先定义div的位置。

js获取浮动(float)元素的style.left值为空的解决办法的更多相关文章

  1. js 获取iframe页面元素

      js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --> <iframe id ...

  2. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  3. [Jmeter]Xpath获取元素某个属性的值,以及获取最后一个元素某个属性的值

    XPath获取元素某个属性的值 XPath query:  clients/attribute::total XPath获取最后一个元素某个属性的值 XPath query:   /clients/c ...

  4. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  5. JS获取表单元素的value

    <!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 ...

  6. js获取精确的元素宽高(普通获取高度会有误差)

    当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...

  7. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  8. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  9. js获取div基础元素

    1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距 ...

随机推荐

  1. IOS之富文本编辑

    之前做项目时遇到一个问题:          使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结 ...

  2. Leetcode 182. Duplicate Emails

    Write a SQL query to find all duplicate emails in a table named Person. +----+---------+ | Id | Emai ...

  3. 《C++ Primer》 chapter 15 TextQuery

    <C++ Primer>中第15章为了讲解面向对象编程,举了一个例子:设计一个小程序,能够处理查询给定word在文件中所在行的任务,并且能够处理“非”查询,“或”查询,“与”查询.例如执行 ...

  4. Intent的概念及应用(二)

    ------siwuxie095 1.Intent过滤器 intent-filter 相关选项 如果多个Activity拥有同样的action,在启动时这个action时的情况: 首先在LearnIn ...

  5. HNU 13074 Goldbach’s Conjecture 解题报告

    题目大意:输入一个偶数(x<32000),输出这个偶数是由哪两个素数相加所得. 比如:一个偶数26,它可以是3+23,7+19,13+13,这些素数相加所得. 输入输出样例: Sample In ...

  6. redis php sort 函数

    很多人把redis当成一种数据库,其实是利用redis来构造数据库的模型,有那种数据库的味道.但是在怎么构建还是key和value的关系.根真正的关系型数据库还是不一样的.效率高,不方便:方便的,效率 ...

  7. C,C++,VC++有什么区别

    C语言是一种古老而又经久不衰的计算机程序设计语言,大约诞生于上个世纪60年代.由于它的设计有很多优点,多年以来深受广大程序设计人员的喜爱,并逐渐淘汰了很多其它程序设计语言.我们平时使用的大多数软件都是 ...

  8. Java语言Socket接口用法详解

    Socket接口用法详解   在Java中,基于TCP协议实现网络通信的类有两个,在客户端的Socket类和在服务器端的ServerSocket类,ServerSocket类的功能是建立一个Serve ...

  9. PHP函数 mysql_real_escape_string 与 addslashes 的区别

    addslashes 和 mysql_real_escape_string 都是为了使数据安全的插入到数据库中而进行的过滤,那么这两个函数到底是有什么区别呢? 首先,我们还是从PHP手册入手: 手册上 ...

  10. jQuery 获取和设置type为hidden的input的值

    HTML代码 <input type="hidden" name="type" id="type" value="1&quo ...