Bir HTML düğmesinin veya resminin koordinatlarını, çapraz tarayıcıyı nasıl bulabilirim?

Question

Orada zafer açıklandı geçenlerde comp.lang.javascript bu konuda bir iplik oldu ama hiçbir kod yayınlanmıştır: Bir HTML sayfasında

nasıl sol alt köşesinde bir elementin koordinatları (resmi veya düğme bulurum , tarayıcılar ve sayfa stilleri arasında güvenilir bir şekilde söyleyebilir misiniz? "Ajax in Action" (kopyaladığım) belgesinde savunulan yöntem, bazı durumlarda IE'de çalışmıyor gibi görünüyor. Sorunu daha kolay hale getirmek için, küresel belge stilini "geleneksel" veya "geçiş" ya da her ne olursa olsun ayarlayabileceğimizi varsayalım.

Lütfen kodu veya kod için bir işaretçi (lütfen tüm tarayıcılarda çalışan tam bir işlev) sağlayın - sadece "bu kadar kolay" deyin ve DOM'u kasıp kavuran şey hakkında konuşmayın - eğer bu tür bir yazı okumak istersem şey ben comp.lang.javascript için geri döneceğim. Lütfen bu bir tekrar ve beni çözüm için işaret - beni bulmaya çalıştım beni azarladı.

Answer 1

, JQuery kullanıyor işe böyle şeyler almak için tek kesin yolu (korkmayın sadece içermek zorunda olduğunuz bir dış komut dosyasıdır. Sonra herhangi genelinde mükemmel bir performans sergiliyor güncel koordinatlarını ve şimdiye kadar karşılaştığınız tüm tarayıcıları almak için

$('#element').position() 

veya

$('#element').offset() 

gibi bir ifade kullanabilirsiniz.

Answer 2

bu deneyin: jQuery yılında

var elm = document.getElementById('foo'); 
var point = {x:0,y:elm.offsetHeight}; // Change to y:0 to get the top-left 

while (elm) 
{ 
    // This will get you the position relative to the absolute container, 
    // which is what you need for positioning an element within it 
    if (elm.style.position == 'absolute') 
     break; 

    point.x += elm.offsetLeft; 
    point.y += elm.offsetTop; 

    elm = elm.offsetParent; 
} 

Answer 3

: Tecrübelerime göre

var jq = $('#yourElement'); 
var position = jq.offset(); 
alert('x: ' + position.left + ', y: ' + position.top); 

var bottomLeftPixelPosition = 
    { left: position.left, top: position.top + jq.height() - 1; }; 

Answer 4

Bunu kullanıyorum, hem IE hem de Firefox için çalışıyor.

 
var Target = document.getElementById('SomeID'); 
var Pos = findPos(Target); 

AnotherObj = document.getElementById('AnotherID'); 
AnotherObj .style.top = Pos[1] + "px"; 
AnotherObj .style.left = Pos[0] + "px"; 

//------------------------------------ 
function findPos(obj) { 
//---------------------------------------- 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
    do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
    } while (obj = obj.offsetParent); 
    return [curleft,curtop]; 
    } 
} 

Answer 5

Bu özümü web'den buldum ... Bu Tamamen Sorunumu Çözdü. Lütfen bu bağlantıyı kaynak için kontrol edin. http://www.quirksmode.org/js/findpos.html

/** This script finds the real position, 
* so if you resize the page and run the script again, 
* it points to the correct new position of the element. 
*/ 
function findPos(obj){ 
    var curleft = 0; 
    var curtop = 0; 

    if (obj.offsetParent) { 
     do { 
     curleft += obj.offsetLeft; 
     curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return {X:curleft,Y:curtop}; 
    } 
} 

(çok diğerlerinde Hope) Firefox, IE8'i Opera Mükemmel

İşleri bilgilerini ... Saygılar paylaşan olanlara sayesinde

adinamik