• 系Javascript框架开发(六) 节点定位


    节点定位就是获取一个元素所在的位置。
    jQuery中和节点定位有关的函数为:
    $.prototype.offset
    $.prototype.position


    在DOM编程中,W3C已规定一系列用来定位节点的成员:
    offsetLeft offsetTop scrollTop scrollLeft getBoundingRect getClientRects
    不过这些属性被浏览器搞得无法直接用。

    节点定位看似简单,实现含很多的技巧。在 jQuery 中,专门定义一个类用来管理定位(内部使用)。

    说到位置,大家肯能想到就是元素的(x, y) 。然后事情不那么简单:
    假设左上角为(0, 0) 位置, 那一个元素的位置是它的 绝对位置
    但如果页面可以滚动,在滚下之后,它的位置如何表示? 这里我把这个位置叫节点的 当前位置。在 CSS 中, 使用 left top 能更改节点位置,但这个位置不是绝对坐标的点,而是相对父节点的位置。我们把这个位置称 偏移位置

    见图


    在 jQuery中, position 返回 偏移位置。 offset 返回当前位置。

    下面一个个解决,如何获取这些位置。


    1. 滚动位置。(滚动条翻转的大小)
    全浏览器都一样:
    elem.srcollTop

    2. 当前位置。
    使用  getBoundingRect 获取,但老浏览器需要手动计算这个值。

    3. 绝对位置。
    在当前位置加上滚动位置,即绝对位置。

    4. 偏移位置。
    当前节点的绝对位置减偏移节点的绝对位置。

    (具体实现可见 jQuery 源码)

  • 相关阅读:
    [NOI Online 2021 提高组] 愤怒的小 N
    CF1474F 1 2 3 4 ...
    CF1466H Finding satisfactory solutions
    CF1336F Journey
    [PKUSC2021]代金券
    如何科学地设计对拍随机种子
    CF1168E Xor Permutations
    「JOISC 2019 Day2」两种运输
    springboot json参数
    springboot整合webserver应用
  • 原文地址:https://www.cnblogs.com/xuld/p/1953907.html
Copyright © 2020-2023  润新知