从顶部到底部更改偏移量返回null

Question

所以我在这里有一个小脚本来获取图像的坐标，我希望它从左下角开始而不是从左上角开始但是当我从以下位置更改时：

window.current_y = Math.round(event.pageY - $('#image').offset().top);

至：

window.current_y = Math.round(event.pageY - $('#image').offset().bottom);

它不读取坐标。

$( document ).ready(function() {
 $('#image').mousemove( function(event) {
	window.current_x = Math.round(event.pageX - $('#image').offset().left);
	window.current_y = Math.round(event.pageY - $('#image').offset().top);
	window.current_coords = window.current_x + ', ' + window.current_y;
	$('#image_coords_now').html('Column: ' + window.current_coords + '.');
  }).mouseleave( function() {
	$('#image_coords_now').html(' ');
  }).click( function() {
$('#x').html(window.current_x);
$('#y').html(window.current_y);

	$('#image_coords_click').html('Last click: ' + window.current_coords + '. ');
   
  var x0=21;
  var y0=25;
  var x1=163;
  var y1=167;
  var difx_cost=x1-x0;// difx=dify
  var dify_cost=y1-y0;
  var arr=new Array();
  var j=1;
  var x_reset=x0;
  var y_reset=y0;
  for(var i=0;i<=100;i++)
   {
  
var prod=10*j;

  var cell={x0:x0,x1:x0+difx_cost,y0:y0,y1:y0+dify_cost};
  x0=cell['x1'];
  if((i+1)==prod)
  {
  
  y0=cell['y1'];
  x0=x_reset;
  j++;
  }
  arr.push(cell);
  
  
  
  }
  console.log(arr);
  
  
var x=$('#x').html();
var y=$('#y').html();
//console.log(arr[0]['x0']);
var cost=0;
for(var k=0;k<=arr.length;k++){
cost=k;
if (x>=arr[k]['x0'] && x<=arr[k]['x1'] && y>=arr[k]['y0'] && y<=arr[k]['y1'])
{

alert('cell number  '+(cost+1));
break;
}

}
  
  
  
  });
  });

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

<p id="x"></p>
<p id="y"></p>



<span id="image_coords_click"></span><span id="image_coords_now"> </span></div>
<img id="image" class="aligncenter" src="http://4.bp.blogspot.com/-c0lydOomMh8/UdMXTLn0frI/AAAAAAAAKdU/xa8kZMf23uQ/s721/100+number+grid.png" width="1475" height="1475" />

Answer 1

.offset()返回{top: ###, left: ###}，因此没有bottom财产。

要获得“底部”，您需要添加元素高度：

$('#image').offset().top + $('#image').height()