有如下元素:

<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. windows下nginx以服务自启动

    1,下载最新版的 Windows Service Wrapper 程序,例如:"winsw-1.9-bin.exe" 也可以修改它的名字,例如:myapp.exe 2, 将重命名后 ...

  2. 2014年辛星完全解读Javascript第五节 break和continue与错误处理

    先说一下break和continue的主要用法吧,break用于跳出循环,continue用于跳过该循环中的一个迭代.简单的说,就是break直接从该语句跳出,但是continue不会跳出该循环语句, ...

  3. html 页面 ajax 方法显示遮罩

    showLoading.css 样式: ;;list-style-type:none;} a,img{;} .overlay{;;;;;width:100%;height:100%;_padding: ...

  4. linux驱动系列之makefile

    在linux环境下做嵌入式无论是编写应用程序还是驱动程序等等,都需要用make来进行程序的编译,就需要学会自己编写Makefile.Makefile主要的作用有3点:1.决定编译哪些文件 2.怎样编译 ...

  5. Java程序员的发展前景

    不知道什么时候开始,IT业初级程序员的工作性质与进城打工的"农民工"变得如此惊人的相似.很多IT公司的高管认为"人便宜,就是要用到坏掉,然后再找更便宜.更年轻的" ...

  6. Java NIO(New I/O)的三个属性position、limit、capacity

    Java NIO(New I/O)的三个属性position.limit.capacity 在缓冲区中,最重要的属性有下面三个,它们一起合作完成对缓冲区内部状态的变化跟踪: capacity posi ...

  7. Kafka server的的停止

    这算是CountDownLatch的一个典型使用场景. kafka.Kafka对象的main方法中与此有关的代码为 // attach shutdown handler to catch contro ...

  8. fiddler 插件开发

    本文主要讲解使用.net C#语言开发Fiddler插件. 1.在Fiddler 会话列表中添加自定义列 使用FiddlerApplication.UI.lvSessions.AddBoundColu ...

  9. 2013流行Python项目汇总

    2013流行Python项目汇总 转自:http://www.kankanews.com/ICkengine/archives/102963.shtml Python作为程序员的宠儿,越来越得到人们的 ...

  10. Windows调试的基石——符号(1)

    当应用程序被链接以后,代码被逐一地翻译为一个个的地址,优化以后的代码可能初看起来更是面目全非.每当我们使用vs或者windbg等微软的调试工具进行调试的时候,我们可以方便地使用变量名来查看内存.可以使 ...