<!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. 第二篇：白话tornado源码之待请求阶段

    上篇<白话tornado源码之一个脚本引发的血案>用上帝视角多整个框架做了一个概述,同时也看清了web框架的的本质,下面我们从tornado程序的起始来分析其源码. 概述 上图是torna ...

  2. 继续Django

    环境准备 1.    创建一个Django后,Django的目录: │ manage.py │ ├─Django_s1 │ settings.py │ urls.py │ wsgi.py │ __in ...

  3. TPS04-J. 使用线程池时确保ThreadLocal变量每次都初始化

    线程池可以提供这种保障,一旦你的代码开始执行了,被分配来执行这个task的线程在执行完你的task之前不会做别的事情. 所以不用担心执行到一半被别的task改了 thread local 的变量. 由 ...

  4. 由LazyMan联想到的

    LazyMan问题与解法 http://mp.weixin.qq.com/s/drNGvLZddQztcUzSh8OsSw 给出了一道题目,并给出了解法: 题目: 实现一个LazyMan,可以按照以下 ...

  5. .NET XML序列化与反序列化

    闲着没事,写了两个通用的XML序列化与反序列化的方法. 贴出来当作笔记吧! /// <summary> /// XML序列化 /// </summary> /// <ty ...

  6. 屌丝程序员的梦想 (六) 我也写个开源CMS

    离开上家公司之后,我没急着找下家公司,一直以来都是为公司做各个细小的功能却没有属于自己的完整的项目 思来想去,我准备用自己熟悉的thinkphp 和 extjs写一个开源的cms,从用户系统,文章系统 ...

  7. PHP扩展开发及内核应用

    目录中汉字部分代表已经翻译完成的章节,带链接的表示已经发布的,未待链接的表示正在校正即将发布的. PHP的生命周期 让我们从SAPI开始 PHP的启动与终止 PHP的生命周期 线程安全 小结 PHP变 ...

  8. C#树状图 初始默认选中节点

    效果图: <script type="text/javascript"> $(document).ready(function () { GetTree(); GetG ...

  9. html5，单击文字自动获得焦点

    <p><label for=""></label>这样单击后自动获得焦点</p>

  10. python 中使用celery

    http://www.thinksaas.cn/group/topic/395734/