<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p onclick=getElementRect(this)>你好</p>

        <p onclick=getElementRect(this)>你好</p>

        <p onclick=getElementRect(this)>你好</p>

        <table border="1" cellspacing="" cellpadding="">

            <tr><th onclick=getElementRect(this)>Header</th></tr>

            <tr><td>Data</td></tr>

            <tr><td>Data</td></tr>

        </table>

    </body>

</html>

<script>

    /**

     * 滚动条的位置

     * @param {Object} w

     */

    function getScrollOffsets(w){

        w = w || window;

        //除了IE 8以及更早的版本以外，其他浏览器都支持

        if(w.pageXOffset != null){

            return {x:w.pageXOffset,y:w.pageYOffset};

        }

        /**

         * document.compatMode用来判断当前浏览器采用的渲染方式。

         * BackCompat：标准兼容模式关闭。

         * CSS1Compat：标准兼容模式开启。

         * 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth;滚动条的位置document.body.scrollLeft

         * 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth;滚动条的位置 document.documentElement.scrollLeft

         */

        var d = w.document;

        if(document.compatMode == "CSS1Compat"){

            return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};

        }else{

            return {x:d.body.scrollLeft,y:d.body.scrollTop};

        }

    }

    //作为一个对象的w和h属性返回视口的尺寸

    function getViewportSize(w){

        //使用指定的窗口， 如果不带参数则使用当前窗口

        w = w || window;

        //除了IE8及更早的版本以外，其他浏览器都能用

        if(w.innerWidth != null){

            return {w: w.innerWidth, h: w.innerHeight};

        }

        //对标准模式下的IE（或任意浏览器）

        var d = w.document;

        if(document.compatMode == "CSS1Compat"){

            return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};

        }else{

            return {w: d.body.clientWidth, h: d.body.clientHeight};

        }

    }

    /**

     * 这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标，需要加上滚动偏移量：

     * getBoundingClientRect()方法。该方法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、bottom属性的对象。

     * @param {Object} e

     */

    function getElementRect(e){

        var box = e.getBoundingClientRect();

        var offsets = getScrollOffsets();

        var x = box.left + offsets.x;

        var y = box.top + offsets.y;

        var w = box.width || box.right - box.left;

        var h = box.height || box.bottom - box.top;

        console.log({x:x, y:y ,w:w, h:h})

        return {x:x, y:y ,w:w, h:h};

    }

</script>

HTML定位（滚动条、元素，视口）定位的更多相关文章

  1. 页面元素定位-CSS元素基本定位

    基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...

  2. 使用原生JS定位网页元素

    约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw&qu ...

  3. selenium webdriver学习（四）------------定位页面元素(转)

    selenium webdriver学习(四)------------定位页面元素 博客分类: Selenium-webdriver seleniumwebdriver定位页面元素findElemen ...

  4. UI自动化学习笔记- Selenium元素定位及元素操作

    一.元素定位 1. 如何进行元素定位? 元素定位就是通过元素的信息或元素层级结构来定位元素的 2.定位工具 浏览器开发者工具 3.元素定位方式 Selenium提供了八种定位元素方式 id name ...

  5. offsetTop 实现滚动条内内容定位

    js代码: var _parent_top = document.getElementsByClassName('parent')[0].offsetTop;var _phase_top = docu ...

  6. 定位网页元素、透明度、z-index、包裹性和破坏性

    一.定位 position属性————规定元素的定位类型,即元素脱离文档流的布局,在页面的任意位置显示 也可以参见以前的总结 <—— 戳 static:默认值,没有定位 relative:相对定 ...

  7. Web自动化必会知识：「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

  8. 1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  9. WebDriver API元素的定位

    一.以下截图为用FireBug定位的用火狐(Firefox)浏览器打开的百度首页,下面所讲述的八种定位方法,就是以该截图中的百度输入框为例子. ①.FireBug是Firefox浏览器下的开发类插件, ...

  10. selenium定位页面元素的一件趣事

    PS:本博客selenium分类不会记载selenium打开浏览器,定位元素,操作页面元素,切换到iframe,处理alter.confirm和prompt对话框这些在网上随处可见的信息:本博客此分类 ...

随机推荐

  1. redis介绍【转】

    Redis新的存储模式diskstore Thursday, Jan 6th, 2011 by Tim | 13 CommentsFiled under: data | Tags: Mongo, Mo ...

  2. Code Hard or Go Home

    介绍Webkit的渊源  http://hypercritical.co/2013/04/12/code-hard-or-go-home

  3. CKEditor和IMCE构建drupal编辑器

    1. 安装并启用CKEditor和IMCE模块. 2. 配置CKEditor: 3. 配置用户的权限即可.最终效果图:

  4. LoadRunner error -27498

    URL=http://172.18.20.70:7001/workflow/bjtel/leasedline/ querystat/ subOrderQuery.do错误分析:这种错误常常是因为并发压 ...

  5. linux下磁盘的挂载与卸载

    Linux下每个文件系统都有独立的inode,block,super block等信息,这个文件系统要挂载到目录树才可以使用,将文件系统与目录树结合的操作称为挂载,反之则为卸载. 也就是说,挂载点一定 ...

  6. 开源堡垒机GateOne的安装、配置笔记

    因为内部临时需要这么一套系统,所以搜搜查查,搞定了系统部署,使用pam认证的配置. 系统初始化是使用CentOS 6.5 Mini x64版本.   首先exports http_proxy和http ...

  7. pku3277 City Horizon

    http://poj.org/problem?id=3277 线段树,离散化,成段更新 #include <stdio.h> #include <stdlib.h> #defi ...

  8. SharePoint咨询师之路:设计之前的那些事一:容量

    提示:本系列只是一个学习笔记系列,大部分内容都可以从微软官方网站找到,本人只是按照自己的学习路径来学习和呈现这些知识. 咨询师更多的时候是解决方案提供者,那么他们如何能够提供有效的SharePoint ...

  9. Spark RDD概念学习系列之RDD的缺点（二）

        RDD的缺点? RDD是Spark最基本也是最根本的数据抽象,它具备像MapReduce等数据流模型的容错性,并且允许开发人员在大型集群上执行基于内存的计算. 为了有效地实现容错,(详细见ht ...

  10. 测试peerdroid示例程序步骤

    来自JXTA交流群(36855950)...韦发改(992611244)  15:12:25—————————————————————————————————————————————————————— ...