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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
Jquery之美中不足小结
Feb 16 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
JS变量提升原理与用法实例浅析
May 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
php Smarty 字符比较代码
2011/02/27 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python实现把数字转换成中文
2015/06/29 Python
python logging日志模块的详解
2017/10/29 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python shelve模块实现解析
2019/08/28 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
const和static readonly区别
2013/05/20 面试题
证券期货行业个人的自我评价
2013/12/26 职场文书
小加工厂管理制度
2014/01/21 职场文书
教师专业自荐书范文
2014/02/10 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2015个人半年总结范文
2015/03/09 职场文书
运动会报道稿大全
2015/07/23 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python