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
Oct 31 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
SONY SRF-40W电路分析
2021/03/02 无线电
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
php intval函数用法总结
2019/04/14 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Pytorch 实现权重初始化
2019/12/31 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
双创工作实施方案
2014/03/26 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
班主任经验交流材料
2014/12/16 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL