有如下元素:

<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. STAD Parameters

    STAD related parameters:   1. stat/file  -- define the file name of the actual STAD content – defaul ...

  2. 编译安装php Cannot find MySQL header files under /usr/include/mysql.

    编译php-5.5-6的mysql支持,出现Cannot find MySQL header files under /usr/include/mysql. Note that the MySQL c ...

  3. OpenCV3读取、写入和保存图像

    需要说明的是在OpenCV3中已经将imread()和imwrite()函数转移到imgcodecs模块中,因此读写图像时,需要包含imgcodecs.hpp头文件,但是highgui.hpp头文件中 ...

  4. Cassandra1.2文档学习(14)—— 事务和并发控制

    参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_about_ ...

  5. laravel--上传

    1.视图里面 2.控制器里面 //收集表单提交数据 $input = $request->all(); //查看是否有图片提交上来 if ($request->hasFile('title ...

  6. 我的第一个canvas的作品:漫画对白编辑器

    背景:一直都对canvas挺有有兴趣的,之前刚刚看了<HTML5 CANVAS基础教程>,写了篇读书笔记. 起因:老婆发来一张最近比较热的漫画图(友谊的小船说翻就翻什么的).这种漫画,经常 ...

  7. 修改ECSHOP注册只需要email,并且使用email作为账号

    现在很多主流的电商网站都直接用email作为会员账号,好处是省得用户既要想一个用户名,又要填邮箱,邮箱对于电商网站的重要性不用多提,因此用email作为会员的唯一标识是很合理的做法,本文给出针对ECS ...

  8. wpf datagrid 行双击事件

    Xaml: <DataGrid ItemsSource="{Binding SessionList}" Grid.Row="2" Grid.Column= ...

  9. Pl/sql 导入数据错位问题

    在查询列的时候 多查询一列就可以了 当然是要在所有列对应的情况下 把第一列的 前追加一列 这样就不会错位了 例如如下图

  10. c语言随机数

    写得我自己都看不好了:大家都比较喜欢吃快餐,只需要尽快告诉读者怎么用起来就行了.不想听啰啰嗦嗦说一堆,然后例程还特别麻烦 so:  1.基本 int seed = time(0);//#include ...