JS:如何找到一个元素在屏幕上的位置，而不会在不同的电脑上有所不同

JS: How to find an element's position on the screen without it being different on different computers?

本文关键字：位置 有所不同 电脑 何找 一个 屏幕 JS 元素      更新时间：2023-09-26

我有一个13 x 20矩阵，每个单元格保存一个介于0到300之间的数字。每个数字代表一个不同的贴图，因此可以根据这个矩阵构建地图。

除此之外，我还有一个"hero"character—可移动的图像。当按下箭头时，它朝那个方向移动。有些贴图可以让英雄在上面行走，而有些则不能。因为我知道我的英雄可以走到哪里，不能走到哪里，我希望他的每一个动作都能让我知道他在矩阵的哪个细胞里。如果他在一些之间，我会选择他最常呆的那个(例如，如果英雄的三分之一在[2,5]，其余的在[2,6]，我仍然会说他在[2,6])。所以我检查了document.getElementById("man").style.top(在那里"man"是我的"英雄"的id)。如果它在98和48之间，我把这行设为0，如果它在99和151之间，它是第1行，以此类推，我对document.getElementById("man").style.right做了同样的事情。一切都很顺利!直到……我复制了我的文件，然后在另一台电脑上继续处理它们。发生了四件事:

  1. 到目前为止，我用IE工作，当用Chrome打开我的.html文件时，一些tile图片没有出现。我检查了原因-似乎在Chrome上它正在寻找具有不同名称的图片。例如，我有一个名为‏yellow_grass_round_top_right.bmp的贴图。在Chrome上，当按下检查元素时，似乎是在寻找一个叫þþ‏yellow_grass_round_top_right.bmp的图片，我不知道在哪里"来自，在其他一些瓷砖上，它加上了几个&;(不只是两个)。我不知道为什么在图片名称前加上这些&;þ&;s，我仔细检查了一下，以确保我没有想象。

  2. 用IE打开它，20个tile -应该用一行-用一行半。我必须按CTRL+-七次(!)才能在同一行。在chrome上，它在同一行上，没有任何缩放(放大或缩小)。

  3. 用IE打开它显示了所有的磁贴，但有一个问题与右边和顶部的属性。看起来从右边开始的x个像素现在是x+几个像素。我认为这是因为屏幕大小和分辨率的不同，但有没有办法确保它不会从一个屏幕改变到另一个?

  4. 另一件事是Chrome上的pos与IE中的pos不同!在我CTRL+-在IE上编辑了七次后，终于能够看到它们的线条上的瓷砖，我刷新了，可以像我在3中提到的那样走在右边和顶部的差异上，我检查了我现在根据我的代码在哪个单元格，后来检查了Chrome并得到了不同的答案。所以我认为，位置的不同不仅来自不同的屏幕，而且来自同一台电脑和屏幕上的不同浏览器?有什么办法可以解决这个问题吗?让它在任何浏览器中都处于相同的位置?或者这是不可能的?

由于我的代码大约2600行，我认为如果我也附上它也不会有帮助，但这里是我发现相关的一些代码片段:

.

英雄的cell info 

function checkNextRightPos(xx)
        {
            if((xx<=1246) && (xx>=1200))
                return 0;
            else if((xx<1200) && (xx>=1150))
                return 1;
            else if((xx<1150) && (xx>=1100))
                return 2;
            else if((xx<1100) && (xx>=1050))
                return 3;
            else if((xx<1050) && (xx>=1000))
                return 4;
            else if((xx<1000) && (xx>=950))
                return 5;
            else if((xx<950) && (xx>=900))
                return 6;
            else if((xx<900) && (xx>=850))
                return 7;
            else if((xx<850) && (xx>=800))
                return 8;
            else if((xx<800) && (xx>=750))
                return 9;
            else if((xx<750) && (xx>=700))
                return 10;
            else if((xx<700) && (xx>=650))
                return 11;
            else if((xx<650) && (xx>=600))
                return 12;
            else if((xx<600) && (xx>=550))
                return 13;
            else if((xx<550) && (xx>=500))
                return 14;
            else if((xx<500) && (xx>=450))
                return 15;
            else if((xx<450) && (xx>=400))
                return 16;
            else if((xx<400) && (xx>=350))
                return 17;
            else if((xx<350) && (xx>=295))
                return 18;
            else if((xx<295) && (xx>=245))
                return 19;
            else return -1;
        }
        function checkRightPos()
        {
            jj=checkNextRightPos(rightPos);
        }
        function checkNextTopPos(xx)
        {
            if((xx<=98) && (xx>=46))
                return 0;
            else if((xx<151) && (xx>=99))
                return 1;
            else if((xx<203) && (xx>=151))
                return 2;
            else if((xx<255) && (xx>=203))
                return 3;
            else if((xx<307) && (xx>=255))
                return 4;
            else if((xx<359) && (xx>=307))
                return 5;
            else if((xx<411) && (xx>=359))
                return 6;
            else if((xx<463) && (xx>=411))
                return 7;
            else if((xx<515) && (xx>=463))
                return 8;
            else if((xx<567) && (xx>=515))
                return 9;
            else if((xx<619) && (xx>=567))
                return 10;
            else if((xx<671) && (xx>=619))
                return 11;
            else if((xx<723) && (xx>=671))
                return 12;
        }   
        function checkTopPos()
        {
            ii=checkNextTopPos(topPos);
        }

ii表示我所在的行，jj表示列。

.

从矩阵生成映射

function makeMap()
        {
            var name="";
            for(var i=0; i<shurot; i++)
                for(var j=0; j<amudot; j++)
                {
                name="puzzle"+i+"x"+j; 
                        if(board[i][j]==0)
                        {
                            //alert(name);
                            document.getElementById(name).src="blank.bmp";
                        }
                        else if(board[i][j]==1)
                        {
                            //alert(name);
                            document.getElementById(name).src="ground.bmp";
                        }
                        else if(board[i][j]==2)
                            document.getElementById(name).src="tree_1.bmp";
                        else if(board[i][j]==3)
                            document.getElementById(name).src="tree_2.bmp";
                        else if(board[i][j]==4)
                            document.getElementById(name).src="tree_border.bmp";
                        else if(board[i][j]==5)
                            document.getElementById(name).src="forest_1.bmp";
                        else if(board[i][j]==6)
                            document.getElementById(name).src="forest_2.bmp";
                        else if(board[i][j]==7)
                            document.getElementById(name).src="forest_border.bmp";
                        else if(board[i][j]==8)
                            document.getElementById(name).src="cut_tree.bmp";
                        else if(board[i][j]==9)
                            document.getElementById(name).src="bush.bmp";
                        else if(board[i][j]==10)
                            document.getElementById(name).src="bush_border.bmp";
                }
       }

这只是代码的一部分(不需要在这里写300行几乎重复的代码，除了数字和标题的不同)。

我有260张图片名称为puzzle0x0到puzzle 12x19

可以在这里的HTML部分看到它们:

<p style="line-height:0px">
<img src="blank.bmp" width=50 height=52 id="puzzle0x0"><img src="blank.bmp" width=50 height=52 id="puzzle0x1"><img src="blank.bmp" width=50 height=52 id="puzzle0x2"><img src="blank.bmp" width=50 height=52 id="puzzle0x3"><img src="blank.bmp" width=50 height=52 id="puzzle0x4"><img src="blank.bmp" width=50 height=52 id="puzzle0x5"><img src="blank.bmp" width=50 height=52 id="puzzle0x6"><img src="blank.bmp" width=50 height=52 id="puzzle0x7"><img src="blank.bmp" width=50 height=52 id="puzzle0x8"><img src="blank.bmp" width=50 height=52 id="puzzle0x9"><img src="blank.bmp" width=50 height=52 id="puzzle0x10"><img src="blank.bmp" width=50 height=52 id="puzzle0x11"><img src="blank.bmp" width=50 height=52 id="puzzle0x12"><img src="blank.bmp" width=50 height=52 id="puzzle0x13"><img src="blank.bmp" width=50 height=52 id="puzzle0x14"><img src="blank.bmp" width=50 height=52 id="puzzle0x15"><img src="blank.bmp" width=50 height=52 id="puzzle0x16"><img src="blank.bmp" width=50 height=52 id="puzzle0x17"><img src="blank.bmp" width=50 height=52 id="puzzle0x18"><img src="blank.bmp" width=50 height=52 id="puzzle0x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle1x0"><img src="blank.bmp" width=50 height=52 id="puzzle1x1"><img src="blank.bmp" width=50 height=52 id="puzzle1x2"><img src="blank.bmp" width=50 height=52 id="puzzle1x3"><img src="blank.bmp" width=50 height=52 id="puzzle1x4"><img src="blank.bmp" width=50 height=52 id="puzzle1x5"><img src="blank.bmp" width=50 height=52 id="puzzle1x6"><img src="blank.bmp" width=50 height=52 id="puzzle1x7"><img src="blank.bmp" width=50 height=52 id="puzzle1x8"><img src="blank.bmp" width=50 height=52 id="puzzle1x9"><img src="blank.bmp" width=50 height=52 id="puzzle1x10"><img src="blank.bmp" width=50 height=52 id="puzzle1x11"><img src="blank.bmp" width=50 height=52 id="puzzle1x12"><img src="blank.bmp" width=50 height=52 id="puzzle1x13"><img src="blank.bmp" width=50 height=52 id="puzzle1x14"><img src="blank.bmp" width=50 height=52 id="puzzle1x15"><img src="blank.bmp" width=50 height=52 id="puzzle1x16"><img src="blank.bmp" width=50 height=52 id="puzzle1x17"><img src="blank.bmp" width=50 height=52 id="puzzle1x18"><img src="blank.bmp" width=50 height=52 id="puzzle1x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle2x0"><img src="blank.bmp" width=50 height=52 id="puzzle2x1"><img src="blank.bmp" width=50 height=52 id="puzzle2x2"><img src="blank.bmp" width=50 height=52 id="puzzle2x3"><img src="blank.bmp" width=50 height=52 id="puzzle2x4"><img src="blank.bmp" width=50 height=52 id="puzzle2x5"><img src="blank.bmp" width=50 height=52 id="puzzle2x6"><img src="blank.bmp" width=50 height=52 id="puzzle2x7"><img src="blank.bmp" width=50 height=52 id="puzzle2x8"><img src="blank.bmp" width=50 height=52 id="puzzle2x9"><img src="blank.bmp" width=50 height=52 id="puzzle2x10"><img src="blank.bmp" width=50 height=52 id="puzzle2x11"><img src="blank.bmp" width=50 height=52 id="puzzle2x12"><img src="blank.bmp" width=50 height=52 id="puzzle2x13"><img src="blank.bmp" width=50 height=52 id="puzzle2x14"><img src="blank.bmp" width=50 height=52 id="puzzle2x15"><img src="blank.bmp" width=50 height=52 id="puzzle2x16"><img src="blank.bmp" width=50 height=52 id="puzzle2x17"><img src="blank.bmp" width=50 height=52 id="puzzle2x18"><img src="blank.bmp" width=50 height=52 id="puzzle2x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle3x0"><img src="blank.bmp" width=50 height=52 id="puzzle3x1"><img src="blank.bmp" width=50 height=52 id="puzzle3x2"><img src="blank.bmp" width=50 height=52 id="puzzle3x3"><img src="blank.bmp" width=50 height=52 id="puzzle3x4"><img src="blank.bmp" width=50 height=52 id="puzzle3x5"><img src="blank.bmp" width=50 height=52 id="puzzle3x6"><img src="blank.bmp" width=50 height=52 id="puzzle3x7"><img src="blank.bmp" width=50 height=52 id="puzzle3x8"><img src="blank.bmp" width=50 height=52 id="puzzle3x9"><img src="blank.bmp" width=50 height=52 id="puzzle3x10"><img src="blank.bmp" width=50 height=52 id="puzzle3x11"><img src="blank.bmp" width=50 height=52 id="puzzle3x12"><img src="blank.bmp" width=50 height=52 id="puzzle3x13"><img src="blank.bmp" width=50 height=52 id="puzzle3x14"><img src="blank.bmp" width=50 height=52 id="puzzle3x15"><img src="blank.bmp" width=50 height=52 id="puzzle3x16"><img src="blank.bmp" width=50 height=52 id="puzzle3x17"><img src="blank.bmp" width=50 height=52 id="puzzle3x18"><img src="blank.bmp" width=50 height=52 id="puzzle3x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle4x0"><img src="blank.bmp" width=50 height=52 id="puzzle4x1"><img src="blank.bmp" width=50 height=52 id="puzzle4x2"><img src="blank.bmp" width=50 height=52 id="puzzle4x3"><img src="blank.bmp" width=50 height=52 id="puzzle4x4"><img src="blank.bmp" width=50 height=52 id="puzzle4x5"><img src="blank.bmp" width=50 height=52 id="puzzle4x6"><img src="blank.bmp" width=50 height=52 id="puzzle4x7"><img src="blank.bmp" width=50 height=52 id="puzzle4x8"><img src="blank.bmp" width=50 height=52 id="puzzle4x9"><img src="blank.bmp" width=50 height=52 id="puzzle4x10"><img src="blank.bmp" width=50 height=52 id="puzzle4x11"><img src="blank.bmp" width=50 height=52 id="puzzle4x12"><img src="blank.bmp" width=50 height=52 id="puzzle4x13"><img src="blank.bmp" width=50 height=52 id="puzzle4x14"><img src="blank.bmp" width=50 height=52 id="puzzle4x15"><img src="blank.bmp" width=50 height=52 id="puzzle4x16"><img src="blank.bmp" width=50 height=52 id="puzzle4x17"><img src="blank.bmp" width=50 height=52 id="puzzle4x18"><img src="blank.bmp" width=50 height=52 id="puzzle4x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle5x0"><img src="blank.bmp" width=50 height=52 id="puzzle5x1"><img src="blank.bmp" width=50 height=52 id="puzzle5x2"><img src="blank.bmp" width=50 height=52 id="puzzle5x3"><img src="blank.bmp" width=50 height=52 id="puzzle5x4"><img src="blank.bmp" width=50 height=52 id="puzzle5x5"><img src="blank.bmp" width=50 height=52 id="puzzle5x6"><img src="blank.bmp" width=50 height=52 id="puzzle5x7"><img src="blank.bmp" width=50 height=52 id="puzzle5x8"><img src="blank.bmp" width=50 height=52 id="puzzle5x9"><img src="blank.bmp" width=50 height=52 id="puzzle5x10"><img src="blank.bmp" width=50 height=52 id="puzzle5x11"><img src="blank.bmp" width=50 height=52 id="puzzle5x12"><img src="blank.bmp" width=50 height=52 id="puzzle5x13"><img src="blank.bmp" width=50 height=52 id="puzzle5x14"><img src="blank.bmp" width=50 height=52 id="puzzle5x15"><img src="blank.bmp" width=50 height=52 id="puzzle5x16"><img src="blank.bmp" width=50 height=52 id="puzzle5x17"><img src="blank.bmp" width=50 height=52 id="puzzle5x18"><img src="blank.bmp" width=50 height=52 id="puzzle5x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle6x0"><img src="blank.bmp" width=50 height=52 id="puzzle6x1"><img src="blank.bmp" width=50 height=52 id="puzzle6x2"><img src="blank.bmp" width=50 height=52 id="puzzle6x3"><img src="blank.bmp" width=50 height=52 id="puzzle6x4"><img src="blank.bmp" width=50 height=52 id="puzzle6x5"><img src="blank.bmp" width=50 height=52 id="puzzle6x6"><img src="blank.bmp" width=50 height=52 id="puzzle6x7"><img src="blank.bmp" width=50 height=52 id="puzzle6x8"><img src="blank.bmp" width=50 height=52 id="puzzle6x9"><img src="blank.bmp" width=50 height=52 id="puzzle6x10"><img src="blank.bmp" width=50 height=52 id="puzzle6x11"><img src="blank.bmp" width=50 height=52 id="puzzle6x12"><img src="blank.bmp" width=50 height=52 id="puzzle6x13"><img src="blank.bmp" width=50 height=52 id="puzzle6x14"><img src="blank.bmp" width=50 height=52 id="puzzle6x15"><img src="blank.bmp" width=50 height=52 id="puzzle6x16"><img src="blank.bmp" width=50 height=52 id="puzzle6x17"><img src="blank.bmp" width=50 height=52 id="puzzle6x18"><img src="blank.bmp" width=50 height=52 id="puzzle6x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle7x0"><img src="blank.bmp" width=50 height=52 id="puzzle7x1"><img src="blank.bmp" width=50 height=52 id="puzzle7x2"><img src="blank.bmp" width=50 height=52 id="puzzle7x3"><img src="blank.bmp" width=50 height=52 id="puzzle7x4"><img src="blank.bmp" width=50 height=52 id="puzzle7x5"><img src="blank.bmp" width=50 height=52 id="puzzle7x6"><img src="blank.bmp" width=50 height=52 id="puzzle7x7"><img src="blank.bmp" width=50 height=52 id="puzzle7x8"><img src="blank.bmp" width=50 height=52 id="puzzle7x9"><img src="blank.bmp" width=50 height=52 id="puzzle7x10"><img src="blank.bmp" width=50 height=52 id="puzzle7x11"><img src="blank.bmp" width=50 height=52 id="puzzle7x12"><img src="blank.bmp" width=50 height=52 id="puzzle7x13"><img src="blank.bmp" width=50 height=52 id="puzzle7x14"><img src="blank.bmp" width=50 height=52 id="puzzle7x15"><img src="blank.bmp" width=50 height=52 id="puzzle7x16"><img src="blank.bmp" width=50 height=52 id="puzzle7x17"><img src="blank.bmp" width=50 height=52 id="puzzle7x18"><img src="blank.bmp" width=50 height=52 id="puzzle7x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle8x0"><img src="blank.bmp" width=50 height=52 id="puzzle8x1"><img src="blank.bmp" width=50 height=52 id="puzzle8x2"><img src="blank.bmp" width=50 height=52 id="puzzle8x3"><img src="blank.bmp" width=50 height=52 id="puzzle8x4"><img src="blank.bmp" width=50 height=52 id="puzzle8x5"><img src="blank.bmp" width=50 height=52 id="puzzle8x6"><img src="blank.bmp" width=50 height=52 id="puzzle8x7"><img src="blank.bmp" width=50 height=52 id="puzzle8x8"><img src="blank.bmp" width=50 height=52 id="puzzle8x9"><img src="blank.bmp" width=50 height=52 id="puzzle8x10"><img src="blank.bmp" width=50 height=52 id="puzzle8x11"><img src="blank.bmp" width=50 height=52 id="puzzle8x12"><img src="blank.bmp" width=50 height=52 id="puzzle8x13"><img src="blank.bmp" width=50 height=52 id="puzzle8x14"><img src="blank.bmp" width=50 height=52 id="puzzle8x15"><img src="blank.bmp" width=50 height=52 id="puzzle8x16"><img src="blank.bmp" width=50 height=52 id="puzzle8x17"><img src="blank.bmp" width=50 height=52 id="puzzle8x18"><img src="blank.bmp" width=50 height=52 id="puzzle8x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle9x0"><img src="blank.bmp" width=50 height=52 id="puzzle9x1"><img src="blank.bmp" width=50 height=52 id="puzzle9x2"><img src="blank.bmp" width=50 height=52 id="puzzle9x3"><img src="blank.bmp" width=50 height=52 id="puzzle9x4"><img src="blank.bmp" width=50 height=52 id="puzzle9x5"><img src="blank.bmp" width=50 height=52 id="puzzle9x6"><img src="blank.bmp" width=50 height=52 id="puzzle9x7"><img src="blank.bmp" width=50 height=52 id="puzzle9x8"><img src="blank.bmp" width=50 height=52 id="puzzle9x9"><img src="blank.bmp" width=50 height=52 id="puzzle9x10"><img src="blank.bmp" width=50 height=52 id="puzzle9x11"><img src="blank.bmp" width=50 height=52 id="puzzle9x12"><img src="blank.bmp" width=50 height=52 id="puzzle9x13"><img src="blank.bmp" width=50 height=52 id="puzzle9x14"><img src="blank.bmp" width=50 height=52 id="puzzle9x15"><img src="blank.bmp" width=50 height=52 id="puzzle9x16"><img src="blank.bmp" width=50 height=52 id="puzzle9x17"><img src="blank.bmp" width=50 height=52 id="puzzle9x18"><img src="blank.bmp" width=50 height=52 id="puzzle9x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle10x0"><img src="blank.bmp" width=50 height=52 id="puzzle10x1"><img src="blank.bmp" width=50 height=52 id="puzzle10x2"><img src="blank.bmp" width=50 height=52 id="puzzle10x3"><img src="blank.bmp" width=50 height=52 id="puzzle10x4"><img src="blank.bmp" width=50 height=52 id="puzzle10x5"><img src="blank.bmp" width=50 height=52 id="puzzle10x6"><img src="blank.bmp" width=50 height=52 id="puzzle10x7"><img src="blank.bmp" width=50 height=52 id="puzzle10x8"><img src="blank.bmp" width=50 height=52 id="puzzle10x9"><img src="blank.bmp" width=50 height=52 id="puzzle10x10"><img src="blank.bmp" width=50 height=52 id="puzzle10x11"><img src="blank.bmp" width=50 height=52 id="puzzle10x12"><img src="blank.bmp" width=50 height=52 id="puzzle10x13"><img src="blank.bmp" width=50 height=52 id="puzzle10x14"><img src="blank.bmp" width=50 height=52 id="puzzle10x15"><img src="blank.bmp" width=50 height=52 id="puzzle10x16"><img src="blank.bmp" width=50 height=52 id="puzzle10x17"><img src="blank.bmp" width=50 height=52 id="puzzle10x18"><img src="blank.bmp" width=50 height=52 id="puzzle10x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle11x0"><img src="blank.bmp" width=50 height=52 id="puzzle11x1"><img src="blank.bmp" width=50 height=52 id="puzzle11x2"><img src="blank.bmp" width=50 height=52 id="puzzle11x3"><img src="blank.bmp" width=50 height=52 id="puzzle11x4"><img src="blank.bmp" width=50 height=52 id="puzzle11x5"><img src="blank.bmp" width=50 height=52 id="puzzle11x6"><img src="blank.bmp" width=50 height=52 id="puzzle11x7"><img src="blank.bmp" width=50 height=52 id="puzzle11x8"><img src="blank.bmp" width=50 height=52 id="puzzle11x9"><img src="blank.bmp" width=50 height=52 id="puzzle11x10"><img src="blank.bmp" width=50 height=52 id="puzzle11x11"><img src="blank.bmp" width=50 height=52 id="puzzle11x12"><img src="blank.bmp" width=50 height=52 id="puzzle11x13"><img src="blank.bmp" width=50 height=52 id="puzzle11x14"><img src="blank.bmp" width=50 height=52 id="puzzle11x15"><img src="blank.bmp" width=50 height=52 id="puzzle11x16"><img src="blank.bmp" width=50 height=52 id="puzzle11x17"><img src="blank.bmp" width=50 height=52 id="puzzle11x18"><img src="blank.bmp" width=50 height=52 id="puzzle11x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle12x0"><img src="blank.bmp" width=50 height=52 id="puzzle12x1"><img src="blank.bmp" width=50 height=52 id="puzzle12x2"><img src="blank.bmp" width=50 height=52 id="puzzle12x3"><img src="blank.bmp" width=50 height=52 id="puzzle12x4"><img src="blank.bmp" width=50 height=52 id="puzzle12x5"><img src="blank.bmp" width=50 height=52 id="puzzle12x6"><img src="blank.bmp" width=50 height=52 id="puzzle12x7"><img src="blank.bmp" width=50 height=52 id="puzzle12x8"><img src="blank.bmp" width=50 height=52 id="puzzle12x9"><img src="blank.bmp" width=50 height=52 id="puzzle12x10"><img src="blank.bmp" width=50 height=52 id="puzzle12x11"><img src="blank.bmp" width=50 height=52 id="puzzle12x12"><img src="blank.bmp" width=50 height=52 id="puzzle12x13"><img src="blank.bmp" width=50 height=52 id="puzzle12x14"><img src="blank.bmp" width=50 height=52 id="puzzle12x15"><img src="blank.bmp" width=50 height=52 id="puzzle12x16"><img src="blank.bmp" width=50 height=52 id="puzzle12x17"><img src="blank.bmp" width=50 height=52 id="puzzle12x18"><img src="blank.bmp" width=50 height=52 id="puzzle12x19"><br>
</p>

我认为这是所有相关的代码，但如果有什么是缺失的，你认为它是相关的，我会添加它(只是不想添加不必要的代码，已经足够长了)。

如果有人对我提到的问题有解决方案，我将很高兴听到如何解决它们。

谢谢!

获取坐标非常简单:

var node = document.getElementById(someId);
var x = node.offsetLeft;
var y = node.offsetTop;
var width = node.offsetWidth;
var height = node.offsetHeight;

但是，看起来你更像是在试图准确地设置屏幕上瓷砖的x,y坐标。

因此，首先将所有[相关]元素的padding, margin, border以及可能的line-height设置为0。

* {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 0;
}

然后，将图像绝对放置:

<style type='text/css'>
  img.tile {
    position: absolute;
    width: 50px;
    height: 52px;
  }
</style>
<img class='tile' style='top: 1px; left: 51px;' />
<img class='tile' style='top: 1px; left: 101px;' />
<img class='tile' style='top: 1px; left: 151px;' />
<img class='tile' style='top: 51px; left: 1px;' />
<!-- etc. -->

或者把它们放在桌子上(我知道这是禁忌):

<style type='text/css'>
  table.gameboard {
    width: 500px;
    height: 520px;
  }
  table.gameboard td {
    width: 50px;
    height: 52px;
    border-spacing: 0px;
    border-collapse: collapse;
  }
</style>
<table class='gameboard'>
  <tr>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <!-- etc. -->
  </tr>
  <tr>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <td><img src='whatever.png' /></td>
    <!-- etc. -->
  </tr>
  <!-- etc. -->
</table>
加分点:不要完全依赖于预先计算的每个贴图的位置。创建引用每个tile节点的真正对象: 
function Tile() {
  this.node = initalizeHoweverYouWant();
  this.contains = function(x, y) {
    if (
      x >= this.node.offsetLeft
      && x <= (this.node.offsetLeft + this.node.offsetWidth)
      && y >= this.node.offsetTop
      && y <= (this.node.offsetTop + this.node.offsetHeight)
    ) {
      return true;
    } else {
      return false;
    }
  }
}

然后是某种GameBoard对象，它要么迭代可能的贴图，使用鼠标的x-y坐标调用每个tile.contains()。你可以在这里加入你的魔法"我相当确定贴图XY包含坐标x,y"数学，或你可以在贴图添加到棋盘时创建一个索引。不过老实说，如果您只处理300块左右的tile，那么遍历所有300 可能不是一个明显的性能问题。

这是标题中提到的一个简单想法的大量代码和问题。

据我所知，你试图找到一个元素的位置，并根据正在使用的客户端/浏览器显示它。您需要使用@media css rules

指定谜题中的内容是否可在给定的客户机/浏览器上显示。

要做到这一点，你需要用javascript找到每个元素的位置:

document.element.offsetLeft, document.element.offsetTop

你甚至可以找到客户端的可视区域:

document.element.clientWidth, document.element.clientHeight

即使这不是一个移动应用程序，你也可以考虑像PhoneGap这样的东西来为不同的浏览器/平台部署你的源文件。

http://www.w3schools.com/jsref/dom_obj_all.asp

http://phonegap.com/

http://www.w3schools.com/css/css_mediatypes.asp

相关文章：