获取Html元素在页面中的绝对位置及问题(2)

简介:

  上次在获取Html元素在页面中的绝对位置及问题(1)中说了获取页面元素绝对位置的方法,最后又说到那个方法是有问题的。为了理解这个问题,希望先看一下这两篇文章再看下面文(Web页中的HTML元素的排版布局规则用户定制Web页中元素的排版布局策略)。

    第二篇文章最后比较清楚的说明了,当我们的元素所处的viewport不是<body>的时候,其定位是从自己的viewport的(0,0)开始计算的。这个时候我们如果用获取...(1)中的办法去取绝对位置,将产生错误的定位效果@_@。所以为了避免出错我们需要找到被计算绝对位置的元素的viewport,然后把它的offsetTop和offsetLeft累计到其viewport的(0,0)处为止。

    当我们需要计算的元素的offsetPerent满足这个条件:elmt.style.position == 'absolute' || elmt.style.position == 'relative' || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ),它将是一个viewport,也就是说会影响绝对定位的计算,我们应该在此停止offset的累加。

    更新过的方法叫GetAbsoluteLocationEx,代码附后:

None.gif function GetAbsoluteLocationEx(element)
None.gif{
None.gif     if ( arguments.length != 1 || element ==  null )
None.gif    {
None.gif         return  null;
None.gif    }
None.gif     var elmt = element;
None.gif     var offsetTop = elmt.offsetTop;
None.gif     var offsetLeft = elmt.offsetLeft;
None.gif     var offsetWidth = elmt.offsetWidth;
None.gif     var offsetHeight = elmt.offsetHeight;
None.gif     while( elmt = elmt.offsetParent )
None.gif    {
          // add this judge
None.gif         if ( elmt.style.position == 'absolute' || elmt.style.position == 'relative' 
None.gif            || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) )
None.gif        {
None.gif             break;
None.gif        } 
None.gif        offsetTop += elmt.offsetTop;
None.gif        offsetLeft += elmt.offsetLeft;
None.gif    }
None.gif     return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
None.gif        offsetWidth: offsetWidth, offsetHeight: offsetHeight };
None.gif}

    如果offsetParent没有设置position和overflow属性,GetAbsoluteLocation和GetAbsoluteLocationEx的计算结果完全相同的,也就是说GetAbsoluteLocationEx向下兼容GetAbsoluteLocation。 


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。  

目录
相关文章
|
17天前
|
前端开发 JavaScript API
探索HTML中的元素关系:父元素、子元素、祖先元素与后代元素
探索HTML中的元素关系:父元素、子元素、祖先元素与后代元素
17 4
|
9天前
|
编解码
WordPress页面文件添加html后缀名
wordpress 页面默认不能实现伪静态链接,手动在链接中添加 “.html” ,会自动转码为 “-html” ,但万能的 WordPress,你能想到的功能都会有相应的插件帮你实现。
8 0
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
|
1月前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
31 1
|
13天前
|
JavaScript 前端开发 UED
【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页
【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页
24 0
|
17天前
|
UED
HTML页面定时刷新指南
HTML页面定时刷新指南
19 0
|
17天前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
16 0
|
1月前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
23 1
|
20天前
|
移动开发 前端开发 搜索推荐
HTML5飞跃指南:基础标签元素,网页设计的第一步
HTML5飞跃指南:基础标签元素,网页设计的第一步
|
20天前
|
前端开发
常用 HTML 标签元素(表格、表单)
常用 HTML 标签元素(表格、表单)