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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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时间戳转换的示例
2014/03/31 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
<script defer> defer 是什么意思
2009/05/10 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python SQLite3简介
2018/02/22 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
先进个人总结范文
2015/02/15 职场文书
人工作失职检讨书
2015/05/05 职场文书
起诉状范本
2015/05/20 职场文书