<!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. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...

  2. SqlDataReader对象的NextResult方法读取存储过程多个结果集

    如上图,我这里有返回4个记录集,分别表示 发送的总数,成功数,失败数,以及所有的记录集,那么我怎么去获取呢? 如果我第二个记录集 第三个记录集 都是多行的话,怎么办?可以参考下面这张图

  3. Python自动单元测试框架

    原文链接:http://www.ibm.com/developerworks/cn/linux/l-pyunit/ 软件的测试是一件非常乏味的事情,在测试别人编写的软件时尤其如此,程序员通常都只对编写 ...

  4. js保留小数点后N位的方法介绍

    js保留小数点后N位的方法介绍 利用toFixed函数 代码如下 复制代码 <script language="javascript"> document.write( ...

  5. eclipse 在Navigator视图中查看资源

    随着不断使用Eclipse,Navigator视图中的实体数目会增加.通过在某一项目或文件夹上右击,并在所出现的快捷菜单中选择Go Into命令,你就可以查看该项目或文件夹中的资源了.此时Naviga ...

  6. 一个c++剧情脚本指令系统

    项目希望能够实现一些剧情动画,类似角色移动,镜头变化,台词展现等.剧情动画这东西随时需要修改调整,不能写死在代码里.考虑之后认为需要做一个简单的DSL来定制剧情脚本,策划在脚本里按顺序写入命令,然后我 ...

  7. bzoj 3781 小B的询问（莫队算法）

    [题意] 若干个询问sigma{ cnt[i]^2 } cnt[i]表示i在[l,r]内的出现次数. [思路] 莫队算法,裸题. 一个cnt数组即可维护插入与删除. [代码] #include< ...

  8. JavaIO之RandomAccessFile随机访问文件

    package test.java.io; import java.io.RandomAccessFile; public class RandomAccFile { public static vo ...

  9. linux硬件时间修改与查看

    linux修改时间和日期.查看修改硬件时间 Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel中的 ...

  10. Linux下的hostname命令详解

    1.临时修改: #hostname ***** //*****为修改的hostname 2.永久修改: # vi /etc/sysconfig/networkNETWORKING=yesHOSTNAM ...