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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
潜说js对象和数组
May 25 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
React 实现拖拽功能的示例代码
Jan 06 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
详解Vue中的watch和computed
Nov 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
php中strtotime函数用法详解
2014/11/15 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
深入分析python 排序
2020/08/24 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
工程款申请报告
2015/05/15 职场文书
公司处罚决定书
2015/06/24 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Python代码实现双链表
2022/05/25 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS