Question

我正在研究asp.net项目，最近我们将jQuery版本从1.11.1升级到了3.3.1，然后在遇到一些奇怪的问题之后：

$(element).position().top

你们是否知道我们可以替代position().top或JavaScript？

我还发现了一些有关position().top在jQuery 3.3.1中返回错误值的错误。

有人可以建议使用position().top的替代方法吗？真的很有帮助。

谢谢。

Answer 1

看看这个例子，看看如何在普通JS中获得TOP属性：

// Source: https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/
function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}


// Get properties
var test_element = document.getElementById('relative-div'),
    position = offset(test_element);


// Display them here
document.getElementById('result').innerHTML = JSON.stringify(position, null, 2);


// Use property where you need it
console.log(position.top);

#test{
  position: fixed;
  top: 20px;
  left: 300px;
  width: 100px;
  height:100px;
  background-color: red;
}
#relative-div{
  position: relative;
  left: 30px;
  top: 20px;
}

<div id='test'>
  <div id='relative-div'>xxx</div>
</div>
<pre id='result'></pre>

正如有人建议的那样，由于异步功能可能会影响页面的行为和外观，因此可能会收到错误的位置值。

另一个可能的原因可能是您需要等待整个页面加载，然后才能读取该属性。为此，请在下面使用$（document）.ready（）：

$(document).ready(function(){
     // here
     console.log($(element).position().top)
})

Answer 2

在您的情况下，b'<Hello><World><Country>Belgium</Country></World></Hello>'的替代方法是position() 它返回一个包含top属性和left属性的对象。

示例：

offset()

我还遇到了position（）和offset（）返回不同值的问题，我无法说出原因，我觉得这是jquery库中的错误，但请尝试一下。

$（element）.position（）。top返回错误的值

2 个答案: