演示

Question

我在HTML文档中有一个带id="stimulus"的元素。

当我在浏览器中打开此文档并使用浏览器的控制台调查#stimulus的属性时，这就是我所看到的：

> $('#stimulus').offset()
< Object {top: 0, left: 0}
> $('#stimulus').css('top')
< "-155.761px"
> $('#stimulus').css('left')
< "253.087px"

我怎么解释这个？ top中的offset与使用top方法访问的css有什么不同？

Answer 1

从offset() documentation开始，偏移量来自文档的顶部;而top和left css属性是相对于父级的。也许您希望查看position(）以获得相对于offset parent的偏移量。

Answer 2

偏移是整个页面中的位置

css top将相对于它最近的祖先位置放置元素。祖先可以在页面中的任何位置，因此偏移和顶部不匹配，除非没有定位的祖先

Answer 3

你可能得到了结果的差异，因为id="stimulus"正在动画，你在不同的帧中发出了console.log。或者该元素实际上是“静态的”，并且具有一些其他属性可以更改其offset()位置。

像

console.log("Offset:", $('.test').offset()); // returns {top: 0, left: 0}
console.log("Top/Left:", $('.test').css('top'),  $('.test').css('left')); // returns -200px, -20px

.test{
  position: absolute;
  top: -200px;
  left: -20px;
  transform: translateY(200px) translateX(20px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>

Answer 4

jQuery的.offset()方法＆＃34;返回元素相对于文档＆＃34;的坐标，而.css()方法返回通过CSS样式应用的任何值。

http://api.jquery.com/offset/

Answer 5

来自jQuery's .offset() documentation：

.offset()方法允许我们检索元素相对于文档的当前位置。将其与.position()进行对比，.offset()检索相对于偏移父项的当前位置。

.css()方法抽象原生CSSStyleDeclaration API，它返回相对于父元素的位置，但前提是它在CSS 中明确指定。因此，如果您需要，请使用.position()代替$(function() { var child = $('.child'); console.log('offset: ', child.offset()); console.log('position: ', child.position()); console.log('css: ', { top: child.css('top'), left: child.css('left') }); });。

演示

html, body { margin: 0; padding: 0; } .parent { position: absolute; top: 5px; left: 5px; } .child { position: absolute; top: 10px; left: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script> <div class="parent"> <div class="child">Hello World</div> </div>

var foo_f = new Foo_methods; var foo_o = Object.create(null); foo_o = Object.create(foobar_obj); foo_f.name() //Works, functions can be initialized anywhere. foo_o.name() // Error you have to put the object on top function Foo_methods(){ this.name = function(){ console.log("I am foo in Foo_methods")} } //If I put this on top or in another file it works. If I don't I get an error //Type Error: Object prototype may only be an Object or null: undefined var foobar_obj = { name:function(){ console.log("I am foo in foobar_obj")} }

了解偏移方法的返回值

5 个答案:

演示