获取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,代码附后:

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

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


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

目录
相关文章
WK
|
2月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
55 1
|
4天前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
19天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
28天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 2
|
12天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
30 0
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
36 1
WK
|
2月前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
28 2
|
2月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
66 0
|
2月前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
20 0