ASP.NETアンカーからpxのテキスト位置を取得

Question

私は異常なタスクがありますが、アンカーからpx（x、y）のテキスト位置を取得する必要がありますが、その方法を手がかりにはありません：

ここで

コードです：ここ

は、アンカーのイメージであるASP.NETまたは/およびJavaScriptでこれに

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

どのような方法がありますか？私は、テキストの周りに巻き付くことについて考えていたし、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がある：：Imが取得

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からの相対値です。

文書に対する要素の位置を基準にする場合は、NULL値とoffsetTopおよびoffsetLeftプロパティをインクリメントするまで、再帰的なoffsetParentプロパティを参照できます。

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