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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
javascript 对象的定义方法
Jan 10 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
微信小程序如何连接Java后台
Aug 08 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
详解Vue之计算属性
Jun 20 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php图片缩放实现方法
2014/02/20 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
javascript 日期常用的方法
2009/11/11 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
windows下python安装pip图文教程
2018/05/25 Python
python实现比较文件内容异同
2018/06/22 Python
jupyter实现重新加载模块
2020/04/16 Python
python获取整个网页源码的方法
2020/08/03 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
英语自荐信常用语句
2013/12/13 职场文书
优良学风班申请材料
2014/02/13 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
小学新教师个人总结
2015/02/05 职场文书
毕业生对母校寄语
2015/02/26 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书