在不使用jQuery的情况下通过href散列引用元素

Reference an element by href hash without using jQuery

本文关键字：href 元素 引用 情况下 jQuery      更新时间：2023-09-26

假设我有一个元素<a href="/foo#bookmark">。我想通过它的散列来引用这个元素，这可以使用jQuery来实现。我如何只用JavaScript做到这一点?

示例代码:

<a id="foo" href="/foo#bookmark" onclick="exampleFunction(this)">Some text</a>
<script>
/**
 * @param {Element} el
 */
function exampleFunction(el) {
    let bookmarkHash = el.hash,
        $bookmarkElement = jQuery(bookmarkHash);
    console.info($bookmarkElement.offset().top);
}
</script>

这里jQuery(bookmarkHash)引用了原来的<a>，所以我可以得到元素的偏移量。我如何在纯JavaScript中做到这一点?

在您的脚本jQuery(bookmarkHash); jquery只返回一个选择器。所以你可以很容易地把它替换掉。

/**
 * @param {Element} el
 */
function exampleFunction(el) {
    let bookmarkHash = el.hash,
        $bookmarkElement = document.querySelector(bookmarkHash);
  /* you will need to figure out the elements offset bit */
    console.info($bookmarkElement);
}
<a id="foo" href="#bookmark" onclick="exampleFunction(this)">Some text</a>
<div id="bookmark">Hello</div>

相关文章：