原生js实现offset方法

栏目: JavaScript · 发布时间: 5年前

内容简介:在为 jTool 提供 offset (获取当前节点位置)方法时, 先后使用了两种方式进行实现, 现整理出来以作记录。返回值是 ClientRect 对象集合(与该元素相关的CSS边框),每个 ClientRect 对象包含一组描述该边框的只读属性——left、top、right 和 bottom,单位为像素,这些属性值是相对于视口的top-left的。

在为 jTool 提供 offset (获取当前节点位置)方法时, 先后使用了两种方式进行实现, 现整理出来以作记录。

通过递归实现

function offset(element) {
    var offest = {
        top: 0,
        left: 0
    };

    var _position;

    getOffset(element, true);

    return offest;

    // 递归获取 offset, 可以考虑使用 getBoundingClientRect
    function getOffset(node, init) {
        // 非Element 终止递归
        if (node.nodeType !== 1) {
            return;
        }
        _position = window.getComputedStyle(node)['position'];

        // position=static: 继续递归父节点
        if (typeof(init) === 'undefined' && _position === 'static') {
            getOffset(node.parentNode);
            return;
        }
        offest.top = node.offsetTop + offest.top - node.scrollTop;
        offest.left = node.offsetLeft + offest.left - node.scrollLeft;

        // position = fixed: 获取值后退出递归
        if (_position === 'fixed') {
            return;
        }

        getOffset(node.parentNode);
    }
}
// 执行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset(s_kw_wrap);  // => Object {top: 181, left: 400}

通过ClientRect实现

function offset2(node) {
    var offest = {
        top: 0,
        left: 0
    };
    // 当前为IE11以下, 直接返回{top: 0, left: 0}
    if (!node.getClientRects().length) {
        return offest;
    }
    // 当前DOM节点的 display === 'node' 时, 直接返回{top: 0, left: 0}
    if (window.getComputedStyle(node)['display'] === 'none') {
        return offest;
    }
    // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
    // 返回值包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
    // 返回如{top: 8, right: 1432, bottom: 548, left: 8, width: 1424…}
    offest = node.getBoundingClientRect();
    var docElement = node.ownerDocument.documentElement;
    return {
        top: offest.top + window.pageYOffset - docElement.clientTop,
        left: offest.left + window.pageXOffset - docElement.clientLeft
    };
}
// 执行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset2(s_kw_wrap);  // => Object {top: 181.296875, left: 399.5}

注意事项

offset2() 函数中使用到了 .getClientRects().getBoundingClientRect() 方法,IE11 以下浏览器并不支持; 所以该种实现, 只适于现代浏览器。

.getClientRects()

返回值是 ClientRect 对象集合(与该元素相关的CSS边框),每个 ClientRect 对象包含一组描述该边框的只读属性——left、top、right 和 bottom,单位为像素,这些属性值是相对于视口的top-left的。

并包含 length 属性, IE11以下可以通过是否包含 length 来验证当前是否为IE11以上版现。

.getBoundingClientRect()

返回值包含了一组用于描述边框的只读属性——left、top、right 和 bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

.getBoundingClientRect() 与 .getClientRects()的关系

这两个方法的区别与当前的 display 相关, 当 display=inline 时, .getClientRects() 返回当前节点内每一行文本的 ClientRect 对象数组, 此时数组长度等于文本行数。

当 display != inline 时, .getClientRects() 返回当前节点的 ClientRect 对象数组,此时数组长度为1.

.getBoundingClientRect() 总是返回当前节点的 ClientRect 对象, 注意这里是 ClientRect 对象而不是对象数组。

相关API

getClientRects

getBoundingClientRect

提示

以上测试, 可以通过在百度首页执行进行测试, document.querySelect('#s_kw_wrap') 所获取到的节点为百度首页输入框

以上代码是在进行 jtool 类库编码时实践出来的方式,欢迎 star


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

第三次浪潮

第三次浪潮

托夫勒 / 黄明坚 / 中信出版社 / 2006-6 / 38.00元

《第三次浪潮》作者托夫勒在20多年前预见的未来是:跨国企业将盛行;电脑发明使SOHO(在家工作)成为可能;人们将摆脱朝九晚五工作的桎梏;核心家庭的瓦解;DIY(自己动手做)运动的兴起……时过境迁,如今我们才发现托夫勒的预言竟大多已成为了现实。   20年前的《第三次浪潮》在打开国门之初给人们心灵造成的冲击,其影响至今仍然连绵不绝。托夫勒在这本书中将人类社会划分为三个阶段:第一次浪潮为农业阶段......一起来看看 《第三次浪潮》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器