<!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. Android MVPR 架构模式

    最近我在尝试让 Google 的 IO App 变得可单元测试,我这样做的其中一个原因是验证 Freeman 和 Pryce 在引用中对单元测试的总结.即使现在我还是没有把 IOSched 中的任何一 ...

  2. JS面向对象组件(一) ---包装对象与原型链

    首先我们可以看看平时我们常用的 var str = 'hello'; alert(typeof str); //string var str = new String("hello" ...

  3. Linux进程调度策略

    linux内核的三种主要调度策略: 1,SCHED_OTHER 分时调度策略, 2,SCHED_FIFO实时调度策略(先到先服务)3,SCHED_RR实时调度策略(时间片轮转) 实时进程将得到优先调用 ...

  4. <转>安卓软件测试的几个要点

    1.界面 ① 文字错误.图片不显示或显示不正确.缺少输入项.按钮的大小和点击效果 ② 布局.图片和配色设计问题,测试人员很难进入 ③ 提示信息,提示信息语言准确简洁,有指导性.在应该提示的位置放入提示 ...

  5. 【Java多线程】互斥

    Java多线程学习2——互斥 一.前言 在上一节 (http://www.cnblogs.com/lzhen/p/3917966.html) 中,通过实现Runnable接口,可以实现多线程中的资源的 ...

  6. SNIFFER问题集锦

    SNIFFER相关教程下载: Sniffer使用教程.pdf|Sniffer用法.ppt 具体问题解决: 1.SNIFFER4.75无法使用,打开后提示 No adapter is binding t ...

  7. Python的pep8（代码规范）

    Python的pep8-代码规范 1.    代码布局设计 1.1    缩进 A.   使用四个空格来进行缩进 B.   换行的时候可以使用反斜杠,最好的方法是使用园括号,在使用反斜杠的时候,在反斜 ...

  8. 【LeetCode】88 - Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  9. Maven默认周期与插件

    运行 cmd mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId= ...

  10. [cocos2d-js]长按按钮事件

    定义两个全局变量 var bLeftButtonClick = false; var bRightButtonClick = false; var MainLayer = cc.Layer.exten ...