JS获取浮动(float)元素的style.left值为空的快速解决办法


Posted in Javascript onFebruary 19, 2017

解决办法:

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

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

问题原因:

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于:

style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。

style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。

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

以上所述是小编给大家介绍的JS获取浮动(float)元素的style.left值为空的快速解决办法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
Angular 输入框实现自定义验证功能
Feb 19 #Javascript
js实现九宫格的随机颜色跳转
Feb 19 #Javascript
原生JS实现垂直手风琴效果
Feb 19 #Javascript
js鼠标移动时禁止选中文字
Feb 19 #Javascript
canvas雪花效果核心代码分享
Feb 19 #Javascript
Ajax和Comet技术总结
Feb 19 #Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
英文求职信范文
2014/05/23 职场文书
三年级学生期末评语
2014/12/26 职场文书
劳资员岗位职责
2015/02/13 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书