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 相关文章推荐
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
javascript实现图片轮播代码
Jul 09 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
js调用flash的效果代码
2008/04/26 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
Python实现全局变量的两个解决方法
2014/07/03 Python
python多重继承新算法C3介绍
2014/09/28 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python输出决策树图形的例子
2019/08/09 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
python Zmail模块简介与使用示例
2020/12/19 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
三维科技面试题
2013/07/27 面试题