<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>获取div相对屏幕于左上角的绝对位置</title>
 </head>
 <body>
     <div class="div1"></div>
     <script>
         //返回值是一个包含width height top right bottom left的对象
         var rect = document.querySelector('.div1').getBoundingClientRect()
 　　　　 console.log(rect);
     </script>
 </body>
 </html>

获取div或者元素相对于屏幕坐上角的绝对位置的更多相关文章

  1. js获取div基础元素

    1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距 ...

  2. [jquery]高级篇--获取div子元素

    参考: http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynn ...

  3. js如何获取隐藏的元素的高度

    首先,正常情况下,确保div是有高度的. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  6. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  7. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  8. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  9. jquery1.11 操作checkbox：全选、取消全选、获取选择元素、获取取消选择元素（总结）

    jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...

随机推荐

  1. Q的深层嵌套

    1.如果将异步方法用同步的方式执行,try catch能捕获到错误,同时不会阻塞到主进程,因此console.log(3333)能执行. var fs = require('fs'); try { v ...

  2. Portal 设置

    nodatas 设置agent 状态,其采集指标 agent.alive 上报中断时,通知用户. hostgroups设置 模版设置

  3. CAS学习笔记（二）—— cas server端的login-webflow详细流程

    一.配置文件介绍 关于spring的配置信息只需放入WEB-INF/spring-configuration目录即可,cas启动时会自动加载.这个目录下的spring配置文件几乎不需要改动. 在web ...

  4. 常用的Linux命令

    1.如何创建一个目录?mkdir DirectoryName 2.如何进入服务器根目录?ls / 3.如何查看日历?cal 4.如何修改密码?passwd 5.如何查看当前用户信息?whoami 6. ...

  5. windows批处理的介绍

    扩展名是bat(在nt/2000/xp/2003下也可以是cmd)的文件就是批处理文件. 首先批处理文件是一个文本文件,这个文件的每一行都是一条DOS命令(大部分时候就好象我们在DOS提示符下执行的命 ...

  6. Adobe AIR对本地文件(XML文件)的操作

    引用:http://addiwang.blog.163.com/blog/static/118130772011221114230288/ Air的文件操做主要涉及两个类,FIle和FileStrea ...

  7. 想学习Android开发

    最近被别人说知识面窄,心里受伤了.准备学学Android开发,如果能在手机里运行自己写的app,那是多么high ~~~ Android开发需要看什么资料呢? 说明:本人一直从事windows下的C+ ...

  8. 很好用的request转换为实体方法还有判断实体所有参数不能为空的方法

    /// <summary> /// 模型辅助处理类 /// 2016-04-18 /// </summary> public class ModelHelper { /// & ...

  9. window7下安装第三方包报错及解决

    window7 64位下安装第三方包,,比如安装yaml的exe执行文件,会 报错及解决:python version 2.7(3.4) required,which was not found in ...

  10. Qt qml 单例模式

    Qt qml 单例模式,没什么好说的,看代码吧.单例模式很适合做全局的配置文件. [示例下载] http://download.csdn.net/detail/surfsky/8539313 [以下是 ...