<!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. 剑指offer—第二章算法之二分查找(旋转数组的最小值)

    旋转数组的最小数字 题目:把一个数组最开始的若干元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如:数组{3,4,5,1,2}为{1,2,3,4, ...

  2. Hadoop学习总结之二：HDFS读写过程解析

    一.文件的打开 1.1.客户端 HDFS打开一个文件,需要在客户端调用DistributedFileSystem.open(Path f, int bufferSize),其实现为: public F ...

  3. nodejs简单层级结构配置文件

    在NodeJS中使用配置文件,有几种比较不错的方案:第一种:文件格式使用json是毋容置疑的好方案.格式标准,易于理解,文件内容读取到内存之后,使用JSON的标准分析函数即可得到配置项.第二种:将配置 ...

  4. linux shell中的 #!/bin/bash

    #!/bin/bash是指此脚本使用/bin/bash来解释执行. 其中,#!是一个特殊的表示符,其后,跟着解释此脚本的shell路径. bash只是shell的一种,还有很多其它shell,如:sh ...

  5. 如何用HTML5+PhoneGap写个Path项目

    最近Path这个应用很火爆,网上也出现了不少仿Path菜单的项目.即使在原生APP里边,Path的效果也是非常赞的.我突然想,Web APP是不是也能做出类似Path那样的效果呢?于是就有了OPath ...

  6. oracle 常用语句

    创建用户及授权create temporary tablespace test_temp tempfile 'C:\oracle\product\10.2.0\oradata\hszxdbtemp.d ...

  7. 【Android】Handler使用入门

    本讲内容:Handler使用入门 当用户点击一个按钮时如果执行的是一个常耗时操作的话,处理不好会导致系统假死,用户体验很差,而Android则更进一步,如果任意一个Acitivity没有响应5秒钟以上 ...

  8. Oracle查看和修改其最大的游标数

    原文 Oracle查看和修改其最大的游标数 以下的文章主要是介绍Oracle查看和修改其最大的游标数,本文主要是通过相关代码的方式来引出Oracle查看和修改其最大的游标数的实际操作步骤,以下就是文章 ...

  9. cocos2dx lua中继承与覆盖C++方法

    cocos2dx的extern.lua中的class方法为lua扩展了面向对象的功能,这使我们在开发中可以方便的继承原生类 但是用function返回对象的方法来继承C++类是没有super字段的,这 ...

  10. C++ 虚拟继承

    1.为什么要引入虚拟继承 虚拟继承是多重继承中特有的概念.虚拟基类是为解决多重继承而出现的.如:类D继承自类B1.B2,而类B1.B2都继 承自类A,因此在类D中两次出现类A中的变量和函数.为了节省内 ...