JavaScript中无法通过div.style.left获取值怎么解决

这篇文章主要介绍“JavaScript中无法通过div.style.left获取值怎么解决”,在日常操作中,相信很多人在JavaScript中无法通过div.style.left获取值怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中无法通过div.style.left获取值怎么解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为曲江企业提供专业的网站建设、网站制作,曲江网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

一、问题总结:

    样式必须直接写在元素内部才能通过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的区别

   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相对于根元素定位。


 Short span. 
 Long span that wraps withing this div.
 

JavaScript中无法通过div.style.left获取值怎么解决

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

JavaScript中无法通过div.style.left获取值怎么解决

到此,关于“JavaScript中无法通过div.style.left获取值怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文题目:JavaScript中无法通过div.style.left获取值怎么解决
网页网址:http://bzwzjz.com/article/ghjgph.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 手机网站制作 盐亭网站设计 成都网站建设 网站设计公司 网站建设开发 攀枝花网站设计 网站制作公司 成都网站设计 成都企业网站建设 成都网站制作 成都品牌网站设计 网站建设公司 企业网站设计 网站制作报价 网站建设方案 定制网站建设多少钱 网站设计 成都营销网站制作 企业网站建设 成都网站设计 高端定制网站设计