top = $this.css("top")返回对象与元素值

Question

我有一个HTML对象：

<div data-x="1" data-y="1" class="tile empty" style="top: 32px; left: 434px;"> 
   <div class="inner">1:1</div>
</div>

但出于某种原因..。当我通过以下代码访问top属性时，它位于jQuery中：

$tile = $('[data-x=1][data-y=1]'); 
top = parseInt( $tile.css("top") );

然后使用以下方法打印它：

console.log(top);

它在浏览器中给了我以下内容：

窗口{postMessage:ƒ，模糊:ƒ，焦点:ƒ，关闭:ƒ，父窗口:ƒ，…}

我对此感到非常困惑，我甚至把我的语句- $img.height()的其余部分剥离到top上，因为它稍后将在编码解决方案中的另一个元素上使用。

我希望它返回32 32，得到解析并输出32；

Answer 1

top是浏览器中预定义的全局变量。它是只读的，所以你所做的作业不起作用，你看到的是它的标准值(顶层窗口)。

确保：

1. 给您的代码一个本地范围(不要将代码留在全局范围内)，以及
2. 在本地作用域中声明变量，以及
3. 使用严格模式，以便为只读变量分配是一个错误(而不仅仅是不做任何事情)；严格模式还有其他有用的东西，比如禁用隐含的全球化的恐怖 (这是我贫血的小博客上的一篇文章)。

例如：

(function() {
    "use strict";
    // ...
    var $tile = $('[data-x=1][data-y=1]'); 
    var top = parseInt( $tile.css("top") );
    // ...
})();