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 ...
随机推荐
- linux FTP 批量下载文件
wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理.wget名称的由来是“World Wide Web”与“ge ...
- linux命令之vim使用-(转)vim的保存文件和退出命令
博客地址: http://blog.sina.com.cn/s/blog_5e357d2d0100zmth.html
- javascript之数据推送
我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...
- 操作xml文档的常用方式
1.操作XML文档的两种常用方式: 1)使用XmlReader类和XmlWriter类操作 XmlReader是基于数据流的,占用极少的内存,是只读方式的,所以速度极快.只能采用遍历的模式查找数据节点 ...
- HTTP Header 详解【转】
原文出自:http://kb.cnblogs.com/page/92320/ HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用 ...
- Spark Tungsten揭秘 Day2 Tungsten-sort Based Shuffle
Spark Tungsten揭秘 Day2 Tungsten-sort Based Shuffle 今天在对钨丝计划思考的基础上,讲解下基于Tungsten的shuffle. 首先解释下概念,Tung ...
- thinkphp 使用过程中遇到的一个小函数
1.实现导出Excel文件,并在导出的文件中显示图片 //导出 public function push(){ $goods_list=M('Dajia')->select(); $data = ...
- 使用saltstack批量部署服务器运行环境事例——批量部署nagios客户端
之前关于搭建web服务器集群实验的这篇文章http://www.cnblogs.com/cjyfff/p/3553579.html中,关于如何用saltstack批量部署服务器这一点当时没有记录到文章 ...
- MySQL创建数据库[保存mojo格式的数据库]已经常用的utf8格式数据库
一.创建最新编码utf8mb4格式的库: CREATE DATABASE IF NOT EXISTS yourdbname CHARACTER SET utf8mb4 COLLATE utf8mb4_ ...
- OFBiz进阶之HelloWorld(五)创建新实体
参考文档 https://cwiki.apache.org/confluence/display/OFBIZ/OFBiz+Tutorial+-+A+Beginners+Development+Guid ...