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与vbscript数据共享
Jan 09 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php-fpm配置详解
2014/02/12 PHP
jquery text()要注意啦
2009/10/30 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Selenium的使用详解
2018/10/19 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python中pass的作用与使用教程
2020/11/13 Python
九州传奇上机题
2014/07/10 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
出国考察邀请函
2014/01/21 职场文书
行政助理工作职责范本
2014/03/04 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
财务会计求职信范文
2015/03/20 职场文书
网络研修心得体会
2016/01/08 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
详解JAVA的控制语句
2021/11/11 Java/Android