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 ...
随机推荐
- 自己写的一个分页控件类(WinForm)
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...
- 代码分享:php判断数组是否有序
发布:脚本学堂/PHP编程 编辑:JB02 2013-12-17 14:59:02 [大 中 小] 转自:http://www.jbxue.com/article/14723.html如何判断 ...
- Spark机器学习 Day1 机器学习概述
Spark机器学习 Day1 机器学习概述 今天主要讨论个问题:Spark机器学习的本质是什么,其内部构成到底是什么. 简单来说,机器学习是数据+算法. 数据 在Spark中做机器学习,肯定有数据来源 ...
- 编码错误设置错误报 "SyntaxError: Non-ASCII character '/xe6' "
无意中碰到键盘导致一段处理中文拼音的 python 代码跑起来报了个错 “SyntaxError: Non-ASCII character ‘/xe6' " 看了下是注释 # coding: ...
- 转几篇WPF文章
How to view word document in WPF application (CSVSTOViewWordInWPF) WPF 浏览PDF 文件 如何保存RichTextBox的文本到数 ...
- Foreign Exchange
10763 Foreign ExchangeYour non-profit organization (iCORE - international Confederation of Revolver ...
- Swift与Objective-C的对比
WWDC 2014上苹果再次惊世骇俗的推出了新的编程语言Swift 雨燕, 这个消息会前没有半点风声的走漏.消息发布当时,会场一片惊呼,相信全球看直播的码农们当时也感觉脑袋被敲了一记闷棍吧.于是熬夜学 ...
- Xcode常用设置
1.设置主题和字体大小 2.设置显示代码行号
- Vue引发的getter和setter
Vue引发的getter和setter 公司的新项目决定使用Vue.js来做,当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我 ...
- js学习之函数声明与函数表达式区别[原创]
作为一名js初学者,与大家分享下.Javascript中有函数声明提升的功能,会优先编译函数声明部分.比如, ff(); function ff(){ alert("hello world. ...