Retrieving the `top` value using `$this.css("top") can either return an object or an element value

Question

Something odd is happening with my HTML object:

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

When attempting to access its top property in jQuery using the code below:

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

And then displaying it with:

console.log(top);

The browser outputs this instead:

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

I'm puzzled by this behavior, even after removing part of the code from - $img.height() to top as it's needed for another element later on.

My expectation was to see 32px returned, which would be parsed and output as 32;

Answer 1

Answer №1

top is a global variable that cannot be reassigned in browsers. The value you are seeing is the standard top-level window.

Here are some recommendations:

Always give your code a local scope instead of leaving it at the global scope.
Declare your variables within that local scope.
Utilize strict mode to catch errors like trying to assign values to read-only variables. Strict mode also helps in preventing implicit globals, as discussed in this blog post.

For example:

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

Answer 2

top is a global variable that cannot be reassigned in browsers. The value you are seeing is the standard top-level window.

Here are some recommendations:

Always give your code a local scope instead of leaving it at the global scope.
Declare your variables within that local scope.
Utilize strict mode to catch errors like trying to assign values to read-only variables. Strict mode also helps in preventing implicit globals, as discussed in this blog post.

For example:

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