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);

它在浏览器中给了我

  

窗口{postMessage：ƒ，模糊：ƒ，焦点：ƒ，关闭：ƒ，父对象：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") );
    // ...
})();