javascript - 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>

但出于某种原因...当我通过以下代码在 jQuery 中访问它的 top 属性时:

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

然后使用以下命令打印它:

console.log(top);

它在浏览器中给了我这个:

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

我对此感到很困惑，我什至将声明的其余部分 - $img.height() 剥离到 top 因为它被用在另一个元素上稍后在编码解决方案中。

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

Answer 1

top是浏览器中预定义的全局变量。它是只读的，因此您所做的分配没有工作，您看到的是它的标准值(顶级窗口)。

一定要:

1. 给你的代码一个局部作用域(不要将你的代码留在全局作用域)，并且

2. 在该局部范围内声明您的变量，并且

3. 使用严格模式，这样分配给只读变量就会出错(而不是什么都不做)；严格模式还有其他有用的东西，比如禁用 the horror of implicit globals (这是我贫血的小博客上的一篇文章)。

例如:

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