ASP.NET从锚点获取px中的文本位置

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，但这只能得到我的大小，而不是锚文本的位置。

更新：狂野结果

我改变了一下代码：

    <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>）中，然后获取.offsetTop/.offsetLeft的{​​{1}}。要设置相对于父项的偏移量，请将父项设置为<span>。

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

HTML：

position: relative;

CSS：

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

脚本：

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

输出：

Answer 2

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

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

如果你想要元素相对于文档的位置，那么你可以走向递归的offsetParent属性，直到null值并增加offsetTop和offsetLeft属性。

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