<!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. Centos6.5 python2.7连接mysql数据库

    1.环境是centos6.5 32位系统,python版本是2.7.12,mysql版本是5.5.22.准备好所需压缩包,MySQL-python-1.2.4b4.tar.gz  pip-6.0.7. ...

  2. ios 配置https

    一般来讲如果app用了web service , 我们需要防止数据嗅探来保证数据安全.通常的做法是用ssl来连接以防止数据抓包和嗅探 其实这么做的话还是不够的 . 我们还需要防止中间人攻击(不明白的自 ...

  3. 开始学习c语言

    学习c语言的第一篇博客,心里的感觉说不出来,不知道能不能坚持下去,我是一名工作了差不多2年的phper,其实我本来是想学习数据结构和算法的,但是尼玛这年头那些书的例子都不是php,动不动就是c,jav ...

  4. 同步github上fork出来的分支

    1,clone自己的账号里fork库的分支到本地 git clone 地址_branch 2,增加远程原始分支 git remote add upstream 地址_master 3,fetch原始源 ...

  5. docker-compose编写（英文）

    原文地址:https://docker.github.io/compose/compose-file/ Compose file reference The Compose file is a YAM ...

  6. [SublimeText] 安装包管理

    由于各种访问原因,因此记录一下给自己使用,原文地址如下: http://www.bonusbits.com/wiki/HowTo:Setup_Package_Control_for_Sublime_T ...

  7. WebConfig错误页配置

    在system.web节下配置<customErrors mode="On" defaultRedirect="/ErrorPage/MyErrorPage.htm ...

  8. C# 自动Ping服务

    using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; u ...

  9. VM VirtualBox 安装 Android 4.3虚拟机完整教程

    大家好,今天给大家带来一篇安装安卓虚拟机的教程! 好了,现在开始我们的教程! 一.安装准备 1.Android 4.3安装镜像(文件名:android-x86-4.3-20130725.iso) 电脑 ...

  10. TurboDemo软件使用教程：视频编辑

    视频软件TurboDemo中不仅可以快速的捕捉屏幕,而且可以对视频进行编辑,本文来详细的了解一下这个步骤. 当你完整屏幕捕捉和录制后,点击系统托盘上的箭头或点击键盘上的“print screen”键之 ...