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幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
详解Angular 4.x Injector
May 04 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
浅谈php命令行用法
2015/02/04 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
列表内容的选择
2006/06/30 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
python字符串替换示例
2014/04/24 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
南京某软件公司的.net面试题
2015/11/30 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
安全资料员岗位职责范本
2014/06/28 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
经销商会议开幕词
2016/03/04 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
浅谈Python魔法方法
2021/06/28 Java/Android
Django框架中视图的用法
2022/06/10 Python