html元素elem.style.top.left始终为空
有如下元素:
<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始终为空的更多相关文章
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
- event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素
event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素
- js获取浮动(float)元素的style.left值为空的解决办法
解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relat ...
- 用JQuery操作元素的style属性
可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color"); //获取p元素的样式颜色 无论color属 ...
- Vue中通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象
- vue通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style绑定书写 <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...
- jquery如何为元素设置style?
$("#userLevelCss").attr("style","width:78%;float: right;display: none;" ...
- 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- .Net Core IFormFile 始终为空的问题
之前获取上传文件都是使用Request.Form.Files获取,直到这次改成定义形参 IFormFile时才遇到这个问题. // POST api/values [HttpPost] public ...
随机推荐
- PostgreSQL 8.1 中文文档
PostgreSQL 8.1 中文文档 http://www.php100.com/manual/PostgreSQL8/
- C# Json数据反序列化为Dictionary并根据关键字获取指定值1
Json数据: { "dataSet": { "header": { "returnCode": "0", " ...
- discuz管理中心无法登陆
检查下配置文件,当前管理是不是创始人. 如是,那试下修改数据库,在数据表出错时也会这样,还有一个也同时试下 \config\config_global.php 文件 $_config['admincp ...
- 转载 C# BindingSource
1.引言 BindingSource组件是数据源和控件间的一座桥,同时提供了大量的API和Event供我们使用.使用这些API我们可以将Code与各种具体类型数据源进行解耦:使用这些Event我们可以 ...
- [原创] linux课堂-学习笔记-课程3.Linux目录结构介绍及内核与shell分析
一.目录说明 1.1 bin 一般用户,可执行的系统内置命令 1.2 sbin 系统管理员,可执行的系统内置命令 1.3 boot 启动文件目录,启动有关的文件都保存在此 1.4 dev 设备管理文件 ...
- php框架-yii
安装 修改权限问题:runtime;web/assets(mac上) 配置cookie加密串 config/web.php 修改cookieValidationKey L12 配置数据库 控制器: 默 ...
- laravel方法汇总详解
1.whereRaw() 用原生的SQL语句来查询,whereRaw('select * from user') 就和 User::all()方法是一样的效果 2.whereBetween() 查询时 ...
- lnmp全面优化集合nginx+mysql+php
lnmp的全名是linux+nginx+mysql+php,既然是全面优化那我们就从linux系统的选择入手.debian系统可以算是 linux各分支中做的比较突出的一类,连谷歌都抛弃linux订制 ...
- sublime 经验总结 主题有 less2css
1. 安装“包控制”模块 操作步骤见该网站:https://sublime.wbond.net/installation#Simple sublime2的代码如下: import urllib2,os ...
- java-----基本数据类型包装类
目的:为了方便操作基本数据类型值,将其封装为对象,在对象定义了属性和行为,丰富了改数据的操作,用于描述该对象的类也就成为基本数据类型对象包装类. 例如:int类型的取值范围:Integer------ ...