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

一、问题总结：

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

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

 四、总结：

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

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

赞 (0)

相关推荐

  • 详解租约机制以及在hbase中的应用

    详解租约机制以及在hbase中的应用 为什么需要Lease 分布式系统中为什么需要租约机制,这是因为在分布式系统,为了保证服务的高可用,需要在服务发生故障的时候及时启动另外一个服务实例以替换故障服务.这样就需要在服务端和客户端或者服务端和控制中心维持一个心跳信息,用于服务进程向控制中心汇报当前自己的健康情况,如果控制中心在一段时间收不到服务进程上报的心跳,则会启动新的进程继续对外提供服务. 但是,由于实际网络情况的复杂性,控制中心无法收到心跳时不能准确地判断究竟是服务故障了还是服务进程和控制中心

  • Java使用SFTP上传文件到服务器的简单使用

    最近用到SFTP上传文件查找了一些资料后自己做了一点总结,方便以后的查询.具体代码如下所示: /** * 将文件上传到服务器 * * @param filePath * 文件路径 * @param channelSftp * channelSftp对象 * @return */ public static boolean uploadFile(String filePath, ChannelSftp channelSftp) { OutputStream outstream = null; In

  • java中@ModelAttribute注解的作用

    java中@ModelAttribute注解的作用

    问题描述:当我们使用表单传值得时候,如果定义了,name,address,age.等属性,那么通过表单传过去的值就只有这3个属性,但是我们需要的name,pass,address,age等四个属性.那么在提交表单并赋值的时候就会出现,未得到的值为null的情况.如下图: 获取的pass为null 那么我们需要用@ModelAttribute注解来解决他: 实现代码如下: @ModelAttribute public void getUsers(@RequestParam(value="name&

  • Java 图片与byte数组互相转换实例

    实例如下: //图片到byte数组 public byte[] image2byte(String path){ byte[] data = null; FileImageInputStream input = null; try { input = new FileImageInputStream(new File(path)); ByteArrayOutputStream output = new ByteArrayOutputStream(); byte[] buf = new byte[

  • java 线程同步详细介绍及实例代码

    java 线程同步 概要: 为了加快代码的运行速度,我们采用了多线程的方法.并行的执行确实让代码变得更加高效,但随之而来的问题是,有很多个线程在程序中同时运行,如果它们同时的去修改一个对象,很可能会造成讹误的情况,这个时候我们需要用一种同步的机制来管理这些线程. (一)竞争条件 记得操作系统中,让我印象很深的有一张图.上面画的是一块块进程,在这些进程里面分了几个线程,所有这些线程齐刷刷统一的指向进程的资源.Java中也是如此,资源会在线程间共享而不是每个线程都有一份独立的资源.在这种共享的情况下

  • 【Java】BigDecimal实现加减乘除运算代码

    java.math.BigDecimal BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val) Translates a double into a BigDecimal. 第二种:BigDecimal(String val) Translates the String repre sentation of a BigDecimal into a BigDecimal. 使用BigDecimal要用String来够造,要做一个

  • JavaScript实现的鼠标响应颜色渐变效果完整实例

    JavaScript实现的鼠标响应颜色渐变效果完整实例

    本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

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

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

    一.问题总结: 样式必须直接写在元素内部才能通过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.sty

  • MySQL 处理插入过程中的主键唯一键重复值的解决方法

    MySQL 处理插入过程中的主键唯一键重复值的解决方法

    本篇文章主要介绍在插入数据到表中遇到键重复避免插入重复值的处理方法,主要涉及到IGNORE,ON DUPLICATE KEY UPDATE,REPLACE:接下来就分别看看这三种方式的处理办法. IGNORE 使用ignore当插入的值遇到主键(PRIMARY KEY)或者唯一键(UNIQUE KEY)重复时自动忽略重复的记录行,不影响后面的记录行的插入, 创建测试表 CREATE TABLE Tignore (ID INT NOT NULL PRIMARY KEY , NAME1 INT )d

  • javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

    本文实例讲述了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法.分享给大家供大家参考.具体分析如下: 可能不少朋友会遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

  • javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clientWidth = width+左右padding 2,clientHeigh的实际高度 clientHeigh = height + 上下padding 3,clientTop的实际宽度 cli

  • Vmware中桥接无法获取IP的解决方法

    Vmware设置虚拟操作系统网卡为桥接模式后,本应该和本地网卡获取到同一网段的IP的,但现在突然无法获取到IP设置,原因是什么呢?经过查看,发现Vmware中的网络编辑器中的桥接网卡桥接到了一个虚拟网卡上,更改到物理网卡后,虚拟机中的操作系统就获取到了地址,点[编辑]-- [虚拟网络编辑器] – [更改设置] – 选中VMnet0,类型为桥接模式的那个卡,在已桥接至后边,选择你的物理网卡,如图: Vmware设置虚拟操作系统网卡为桥接模式后,本应该和本地网卡获取到同一网段的IP的,但现在突然无法

  • JavaScript 程序错误Cannot use 'in' operator to search的解决方法

    JavaScript 程序错误Cannot use 'in' operator to search的解决方法

    今天编程时,JavaScript 程序报了这样的错误:Cannot use 'in' operator to search for...,具体错误信息如下: 坦白说,这样的错误最难调试.因为它并不指向你所写的具体代码,而是泛泛指向了 lib.js 文件(该文件通常是第三方的打包压缩库),你几乎无法依据错误类型与错误指向来定位到实际编程中的错误位置. 怎么办? 这个时候,只有发挥"死磕"精神了! 死磕步骤: 依据故障页面以及错误信息,定位到出错的文件,这一点应该不难: 在出错的页面中,依

  • 关于JS中setTimeout()无法调用带参函数问题的解决方法

    本文实例分析了JS中setTimeout()无法调用带参函数问题的解决方法.分享给大家供大家参考,具体如下: 解决方法:重写setTimeout() 方法,需要用到闭包函数.如下: var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay){ if (typeof fRef == 'function') { var argu = Array.prototype.slice.call(arguments, 2);

  • Android开发中Activity之间切换出现短暂黑屏的解决方法

    本文实例讲述了Android开发中Activity之间切换出现短暂黑屏的解决方法.分享给大家供大家参考,具体如下: 在默认情况下,Android应用程序启动时,会有一个黑屏的时期,原因是,首个activity会加载一些数据,比如初始化列表数据.向服务器发送请求获取数据等等.同样,使用startActivity(inte -- 在默认情况下,Android应用程序启动时,会有一个黑屏的时期,原因是,首个activity会加载一些数据,比如初 始化列表数据.向服务器发送请求获取数据等等.同样,使用s

  • AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &

  • 基于Linux系统中python matplotlib画图的中文显示问题的解决方法

    最近想学习一些python数据分析的内容,就弄了个爬虫爬取了一些数据,并打算用Anaconda一套的工具(pandas, numpy, scipy, matplotlib, jupyter)等进行一些初步的数据挖掘和分析. 在使用matplotlib画图时,横坐标为中文,但是画出的条形图横坐标总是显示"框框",就去查资料解决.感觉这应该是个比较常见的问题,网上的中文资料也确实很多,但是没有任何一个彻底解决了我遇到的问题.零零碎碎用了快3个小时的时间,才终于搞定.特此分享,希望能帮到有同

随机推荐