JavaScriptでグローバルスタイルシートを使用して左位置を取得できません

Question

JavaScriptの画像の左上の位置を取得する必要があります。

<script type="text/javascript"> 
function jump() { 
    xpos = document.getElementById("image11").style.left; 
    alert("style.left="+xpos); 

    xpos = document.getElementById("image11").offsetLeft; 
    alert("offsetLeft="+xpos); 
} 
</script> 

しかし：私は

<img id="image11" class="movable" src="testimage.jpg" onclick="jump()" /> 

グローバルスタイルを使用して画像を定義する場合style.left属性が空である

<style type="text/css"> 
img.movable { position:relative; top:0px; left:375px; } 
</style> 

：私は、グローバルスタイルシートで画像の位置を定義しますインラインスタイルを使用して画像を定義すると、次のようになります。

<img id="image11" style="position:relative; top:0px; left:375px;" src="logo.jpg" onclick="jump()" /> 

style.leftには値が含まれています。

この動作はIE8とFirefoxで同じです。それがどんなアイデアですか？

乾杯、

マーティン。

Answer 1

el.styleは、実際にはstyle属性を使用して適用されたすべてのCSSプロパティのマップです。スタイルシートまたはデフォルトのブラウザスタイルで定義されたスタイルを取得するには、計算されたスタイルを使用する必要があります。 Quirksmode, as usual, is a first stop。

Answer 2

独自のスタイルプロパティを持ち、その値はグローバルで与えられた任意のを上書きします、あなたが指定したIMGタグを表し、DOM要素。残念ながら、この場合、値がJavaScriptオブジェクトレベルまでカスケードされないため、指定した要素のプロパティは実際には空になります。

あなたはoffsetLeftプロパティまたはCSSルール自体のいずれかから位置を取得する必要があります。

Answer 3

.styleプロパティはインラインCSSにのみ関連します。したがって、スタイルシートで指定されたスタイルは.styleリストには存在しません。あなたが（ビューポートではなく）ページ上の要素の位置を取得したい場合はこのようなものは動作するはずです：

function getNodePosition(node) { 
    var top = left = 0; 
    while (node) {   
    if (node.tagName) { 
     top = top + node.offsetTop; 
     left = left + node.offsetLeft;  
     node = node.offsetParent; 
    } else { 
     node = node.parentNode; 
    } 
    } 
    return [top, left]; 
} 

がQuirksmodeから適応します。 OffsetTopとOffsetLeftは親に対してwrtであるため、ツリー全体を反復して合計オフセット、したがってページ位置を取得します。ビューポートの位置を知りたい場合は、スクロール距離でここに返された値を調整できます。

Answer 4

はリンクの

function getHTMLElementLeft(HTMLElement, left) 
{ 
    if (left == undefined) 
    { 
     var left = 0; 
    } 
    if (thisNode.nodeType == 1) 
    { 
     left += thisNode.offsetLeft; 
     if (thisNode.offsetParent) 
     { 
      left = getHTMLElementLeft(thisNode.offsetParent, left); 
     } 
    } 
    return left; 
}