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 克隆数组最简单的方法
Feb 12 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
javascript使用location.search的示例
Nov 05 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
浅谈javascript的闭包
Jan 23 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
详解vue引入子组件方法
Feb 12 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
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
DOM XPATH获取img src值的query
2013/09/23 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Django框架models使用group by详解
2020/03/11 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
岗位职责定义及内容
2013/11/08 职场文书
资料员岗位职责
2013/11/17 职场文书
大学自主招生自荐信
2013/12/16 职场文书
单位办理社保介绍信
2014/01/10 职场文书
公司寄语大全
2014/04/10 职场文书
读书之星事迹材料
2014/05/12 职场文书
5s标语大全
2014/06/23 职场文书
百日安全生产活动总结
2014/07/05 职场文书
小学生节水倡议书
2015/04/29 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书