有如下元素:

<div id="div1"   >div1</div>

#div1{
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
background: red;
}

js获取:

var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);

得到的xpos为Nan,为什么?

获取css 设置的style值 
需要使用  document.defaultView..getComputedStyle(node, null).getPropertyValue(styleString) //w3c方法
其中node为你要查询的节点对象 styleString为 如'top' 或'background-color' 此类属性名 而不是js中的backgroundColor 之类的
ie的话 用 node.currentStyle[styleString]  但这个styleString 要用 'backgroundColor' 这种格式取

记得 如果你没有 在node.style.属性名='' 这样显式的在js中赋值或内联style赋值, 你用node.style. 是取不到值的 必须使用上面的方法。

上面的改成:

elem=document.getElementById('id');

var xpos= document.defaultView.getComputedStyle(elem,null).getPropertyValue('left');
var ypos= document.defaultView.getComputedStyle(elem,null).getPropertyValue('top');
var xpos=parseInt(xpos);
var ypos=parseInt(ypos);

就可以了。

html元素elem.style.top.left始终为空的更多相关文章

  1. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

  2. event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素

    event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素

  3. js获取浮动(float)元素的style.left值为空的解决办法

    解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relat ...

  4. 用JQuery操作元素的style属性

    可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color");  //获取p元素的样式颜色 无论color属 ...

  5. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

  6. vue通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style绑定书写             <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...

  7. jquery如何为元素设置style?

    $("#userLevelCss").attr("style","width:78%;float: right;display: none;" ...

  8. 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. .Net Core IFormFile 始终为空的问题

    之前获取上传文件都是使用Request.Form.Files获取,直到这次改成定义形参 IFormFile时才遇到这个问题. // POST api/values [HttpPost] public ...

随机推荐

  1. bzoj 1005 HNOI2008 明明的烦恼

    这题做的我欲哭无泪啊…… 我已经没心情多说啥了…… 高精度T啊!我太弱啊!改了一天啊!还不如滚粗啊! 想好式子在写啊! 能用高精度乘单精度就不要用高精度乘高精度啊!     能用高精度除单精度就不要用 ...

  2. 用css3写出来的进度条

    夜深了,废话不多说,先上代码: <style> * { box-sizing: border-box } .wrapper { width: 350px; margin: 200px au ...

  3. PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解

    uchome的index文件中的二级域名功能判断,使用了php的$_SERVER['HTTP_HOST'],开始对这个不是很了解,所以百度了一下,发现一篇帖子有点意思,转发过来做个记录. 在php中, ...

  4. CCNP第一天 Rip综合实验

    实验题如图所示 R2--R6之间是RipV2, R7和R8是RipV1, 除了R2到R6是快速以太网线,其他均为串线. 所用的拓扑图为CCNP标准版拓扑 如下: ------------------- ...

  5. (转载)异构数据库之间完全可以用SQL语句导数据

    <来源网址:http://www.delphifans.com/infoview/Article_398.html>异构数据库之间完全可以用SQL语句导数据 告诉你一个最快的方法,用SQL ...

  6. OOP三类继承的区别

    OOP继承的区别提纲: 1. 普通类继承,并非一定要重写父类方法.2. 抽象类继承,如果子类也是一个抽象类,并不要求一定重写父类方法.如果子类不是抽象类,则要求子类一定要实现父类中的抽象方法.3. 接 ...

  7. oracle中的隐式提交(auto commit)

    通常我们执行sql或pl/sql时,需要我们手工提交.这样才能使所做的更改永久保存到数据库. 但有时即使我们没有在sql或pl/sql中发出commit命令,所做的更改也会被提交.这种提交是在某些特定 ...

  8. [摘] SQLPLUS Syntax

    You use the SQLPLUS command at the operating system prompt to start command-line SQL*Plus: SQLPLUS [ ...

  9. linux下使用sqlplus使用上下键显示历史命令

    在linux下使用sqlplus没有在windows下方便,既不好用习惯的退格键,也无法通过上键来显示上一条的命令,这里我们使用rlwrap来解决. 1.安装rlwrap [root@toughhou ...

  10. PDF合并

    要求:将多个table导出到一个PDF里,然后打印. 问题分析:要求将四个table放一个PDF打印,四个table的列各不相同,第一个是表头,其他三个是列表,列比表头多很多,如果直接生成一个exce ...