<!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. 【转】lua Date和Time

    time和date两个函数在Lua中实现所有的时钟查询功能.函数time在没有参数时返回当前时钟的数值.(在许多系统中该数值是当前距离某个特定时间的秒数.)当为函数调用附加一个特殊的时间表时,该函数就 ...

  2. Android Studio 小技巧合集

    本文翻译自 Android Studio Tips by Philippe Breault,一共收集了62个 Android Studio 使用小技巧和快捷键. 根据这些小技巧的使用场景,本文将这62 ...

  3. MySQL基础之第14章 存储过程和函数

    避免编写重复的语句 安全性可控 执行效率高 14.1.创建存储过程和函数 14.1.1.创建存储过程 CREATE PROCEDUREsp_name ([proc_parameter[,...]]) ...

  4. php.curl详解

    目前为目最全的CURL中文说明了,学PHP的要好好掌握.有很多的参数.大部份都很有用.真正掌握了它和正则,一定就是个采集高手了. PHP中的CURL函数库(Client URL Library Fun ...

  5. 在Ubuntu里部署Javaweb环境脑残版

    最近在瞎折腾Unbunt,喜欢这里的干净和静谧.能留在这里,那么就得在这里工作,于是部署javaweb就成了头件大事了. 咨询了大牛,都说不会命令你玩毛玩linux,但是万万没有想到,原来ubuntu ...

  6. div 绝对布局居中

    #loginbg{ position:absolute; height:200px; width:400px; margin:-100px 0px 0px -200px; top: 50%; left ...

  7. visual asssit 过期提示

    把目录下的VA_X.dll文件复制到上面所说的文件夹下覆盖源文件即可 对于vs2010的朋友需要额外注意,使用2010的朋友,是需要覆盖到Visual Studio 2010的Visual Assis ...

  8. ArcEngine下投影坐标和经纬度坐标的相互转换

    jojojojo2002 原文 ArcEngine下投影坐标和经纬度坐标的相互转换 投影转经纬度 private IPoint PRJtoGCS( double x, double y) { IPoi ...

  9. [转]linux之nl命令

    转自:http://www.cnblogs.com/peida/archive/2012/11/01/2749048.html nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容 ...

  10. div模拟的下拉框特效

    随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...