有如下元素:

<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. 多进程之间的互斥信号量实现(Linux和windows跨平台)

    多线程之间实现互斥操作方式很多种,临界区(Critical Section),互斥量(Mutex),信号量(Semaphore),事件(Event)等方式 其中临界区,互斥量,信号量算是严格意义的实现 ...

  2. Poj 3062 Celebrity jeopardy

    1.Link: http://poj.org/problem?id=3062 2.Content: Celebrity jeopardy Time Limit: 1000MS   Memory Lim ...

  3. HTML5之图形变换

    - Transformations scale(0.5,0.5) 缩放 rotate(0.175) 旋转 translate(100,50) 位移 - 代码结构 context.scale(x, y) ...

  4. sphinx 占用大量内存

    http://www.coreseek.com/forum/2_1847_0.html(转) 刚开始没改下面2句时,内存占用比较多,在生成index的时候就占用了! 下面是解决方法: 每个索引中写上 ...

  5. ActiveMq+zookeeper+levelDB集群整合配置

    ActiveMq+zookeeper+levelDB集群整合配置 环境:linux系统,jdk1.7  三台linux系统电脑.我这里使用一台window,分别远程3台linux电脑.三台电脑的ip分 ...

  6. centos install(160112更新)

    centos安装之后: 更新 yum update 新增用户: useradd myuser passwd myuser 添加sudo: usermod -a -G wheel myuser //vi ...

  7. VLAN和Trunk

    Vlan实验题: 如图所示 解答过程 (一)相同vlan之间的设备全连通 1. 在SW1和SW2上分别创建vlan2和vlan3, 命令如下 SW1# vlan database SW1(vlan)# ...

  8. Spark Streaming揭秘 Day35 Spark core思考

    Spark Streaming揭秘 Day35 Spark core思考 Spark上的子框架,都是后来加上去的.都是在Spark core上完成的,所有框架一切的实现最终还是由Spark core来 ...

  9. Ping的过程详解

    先看拓朴图: 我在这里讲拼的两情况,一种是同一网段内,一种是跨网段的ping …. 首先,如果主机A,要去拼主机B,那么主机A,就要封装二层报文,他会先查自己的MAC地址表,如果没有B的MAC地址,就 ...

  10. 1030. Travel Plan (30)

    时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A traveler's map gives the dista ...