ASP.NET获取文本在px中的位置from

Question

我有一个不寻常的任务，我必须从px（x，y）中获取文本位置，但我不知道如何做到这一点：

这里是主播的形象：

这里是代码：

<a id="anchor" href="#" runat="server" style="display: inline-block; border-color: #000000; text-decoration: none; border-style: solid; border-width: 1px; background-repeat:no-repeat; width:100px; height:50px;">Text</a> 

有什么办法这个在ASP.NET或/和JavaScript？我正在考虑围绕文本进行包围，并使用js获得offsetWidth/offsetHeight，但这只会让我大小，而不是锚定文本的位置。

UPDATE：野生结果

我改变码位：

<div style="display:inline-block;"> 
        <p class="category-label" align="center">Normal state preview</p> 
        <a id="anchor" href="#" runat="server" style="display: inline-block; border-color: #000000; text-decoration: none; border-style: solid; border-width: 1px; background-repeat:no-repeat; font-family:Arial; font-size:10px; color:#000000; width:100px; height:50px;"> 
        <div runat="server" id="anchorText">Text</div></a> 
       </div> 

<input type="hidden" id="anchorTextTop" runat="server" /> 
<input type="hidden" id="anchorTextLeft" runat="server" /> 

这里是的js我使用：

function GetTextPosition() { 

     var TextTop = document.getElementById('<%= anchorText.ClientID %>').offsetParent.offsetTop; 
     var TextLeft = document.getElementById('<%= anchorText.ClientID %>').offsetParent.offsetLeft; 

     document.getElementById('<%= anchorTextTop.ClientID %>').value = TextTop; 
     document.getElementById('<%= anchorTextLeft.ClientID %>').value = TextLeft; 
    } 

值即时得到：

anchorTextTop = 78（不能是它只有几个像素） anchorextLeft = 541（不能是它的锚的5倍大小）

，如果我用这个在JS：

var TextTop = document.getElementById('<%= anchorText.ClientID %>').offsetTop; 
var TextLeft = document.getElementById('<%= anchorText.ClientID %>').offsetLeft; 

我越来越：

anchorTextTop = 100 anchorextLeft = 201

这是因为控制标记为runat =“server”？

Answer 1

您无法获取元素内文本的位置。您需要将文本包装在<span>（或内联<div>）中，并获取<span>的.offsetTop/.offsetLeft。要设置相对于父项的偏移量，请将父项设置为position: relative;。

演示：http://jsfiddle.net/ThinkingStiff/wC4St/

HTML：

<div style="display:inline-block;"> 
    <p id="category-label" align="center">Normal state preview</p> 
    <a id="anchor" href="#" runat="server" style="display: inline-block; border-color: #000000; text-decoration: none; border-style: solid; border-width: 1px; background-repeat:no-repeat; font-family:Arial; font-size:10px; color:#000000; width:100px; height:50px;"> 
    <span runat="server" id="anchorText">Text</span></a> 
</div> 

CSS：

#anchor { 
    position: relative; 
    text-align: center; 
} 

脚本：

document.getElementById('category-label').textContent = 
     'left: ' + document.getElementById('anchorText').offsetLeft 
    + ' top: ' + document.getElementById('anchorText').offsetTop; 

输出：

Answer 2

您必须使用客户端脚本执行此操作，因为在处理布局尺寸之前，页面需要由浏览器呈现。

你如何计算位置取决于你想要的位置相对于什么。 offsetTop和offsetHeight值是相对于元素的offsetParent。

如果你想要元素相对于文档的位置，那么你可以遍历递归的offsetParent属性，直到一个空值和一个增量offsetTop和offsetLeft属性。

function getPosition() 
{ 
    var element = document.getElementById("anchor"); 
    var position = {}; 
    position.top = element.offsetTop; 
    position.left = element.offsetLeft; 
    return position; 
}