JavaScript中无法通过div.style.left获取值的解决方法


Posted in Javascript onFebruary 19, 2017

一、问题总结:

    样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。

   让元素移动到200停止

setTimeout ( function () {  
  var div = document.getElementById("div4");
  //var left = parseInt(div.style.left) + 5;
  var left = div.offsetLeft + 5;
  
  div.style.left = left + "px";
  if (left < 200) {
    setTimeout( arguments.callee, 50);
  }
  
}, 50);

二、关于offsetLeft和left的区别(关于offsetLeft:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)

   1.定义了position:relative或absolute属性的元素才有left属性,元素都有offsetLeft属性。

   2.元素内联样式中设置了left,才能通过div.style.left获取;offsetLeft直接通过div.offsetLeft获取。

   3.left可读可写,获取到的是字符串;offsetLeft只读,获取到的是数字。

  相同点:定位方式一样,如果父元素设置了定位元素(position设置为relative或absolute),则相对于定位元素定位,否则就是相对于根元素定位。

三、案例:

    HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近 的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

    下面的span的父元素没有设置定位元素,所以该元素的offsetParent为根元素,此时的offsetTop相对于根元素定位。

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1;">
 <span>Short span. </span>
 <span id="long">Long span that wraps withing this div.</span>
 </div>
<div id="box" style="position: absolute; border-color: red;
 border-width: 1; border-style: solid; z-index: 10">
</div>
<script>
 var box = document.getElementById("box");
 var long = document.getElementById("long");
 //
 // long.offsetLeft这个值就是span的offsetLeft.
 // span是个行内元素,它没有没absolute定位,但还是默认offserParent就是父元素,而不是根
 //
 box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = long.offsetTop + document.body.scrollTop + "px";
 box.style.width = long.offsetWidth + "px";
 box.style.height = long.offsetHeight + "px";
</script>

JavaScript中无法通过div.style.left获取值的解决方法

如果给long的父元素添加一个定位属性,结果如下:

JavaScript中无法通过div.style.left获取值的解决方法

 四、总结:

   javascript中通过offsetLeft(offsetTop)方法获取元素偏移值很方便,得到的是数值;改变元素的偏移值使用style.left(top、right、bottom),通过style.left获取的是一个字符串的值,如果要通过style.left来改变元素位置,先要通过parseInt将获取到的当前left值转化为数值。

以上所述是小编给大家介绍的JavaScript中无法通过div.style.left获取值的解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言。

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 #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
You might like
php的一个登录的类 [推荐]
2007/03/16 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
php横向重复区域显示二法
2008/09/25 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
python实现统计代码行数的方法
2015/05/22 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
python对于requests的封装方法详解
2019/01/03 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
四年级科学教学反思
2014/02/10 职场文书
贷款担保书范文
2014/05/13 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
党员证明信
2015/06/19 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis