Bir elemanın alt ve doğru konumunu alın

Pencere içindeki bir öğenin konumunu şu şekilde almaya çalışıyorum:

var link = $(element);

var offset = link.offset();
var top = offset.top;
var left = offset.left;
var bottom = $(window).height() - link.height();
bottom = offset.top - bottom;
var right = $(window).width() - link.width();
right = offset.left - right;

Ancak -önlerinde altta ve sağda ... Neden bu? sayılar doğru olduğundan eksi OLMAMALIDIR.

Onun yerine

var bottom = $(window).height() - link.height();
bottom = offset.top - bottom;

Neden yapmıyorsun

var bottom = $(window).height() - top - link.height();

Düzenleme: Senin hatan, yapıyor olman

bottom = offset.top - bottom;

onun yerine

bottom = bottom - offset.top; // or bottom -= offset.top;

var link = $ (eleman);
var ofset = link.offset ();

var top = offset.top;
var left = offset.left;

var alt = üst + link.outerHeight ();
var sağ = sol + link.outerWidth ();

// Returns bottom offset value + or - from viewport top
function offsetBottom(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().bottom }

// Returns right offset value
function offsetRight(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().right }

var bottom = offsetBottom('#logo');
var right = offsetRight('#logo');

Bu, görüntü alanınızın üstünden ve solundan öğenizin tam kenarına olan mesafeyi bulacak ve bunun ötesinde hiçbir şey bulamayacaktır. Diyelim ki logonuz 350 piksel ve sol kenar boşluğu 50 piksel, 'sağ' değişkeni 400 değerini tutacak çünkü bu, daha fazla dolgunuz olsa bile, öğenizin kenarına ulaşmak için gereken piksel cinsinden gerçek mesafedir. veya sağındaki kenar boşluğu.

Kutu boyutlandırma CSS özelliğiniz border-box olarak ayarlanmışsa, varsayılan içerik kutusu olarak ayarlanmış gibi çalışmaya devam edecektir.

Sen kullanabilirsiniz .position () Bunun için

var link = $(element);
var position = link.position(); //cache the position
var right = $(window).width() - position.left - link.width();
var bottom = $(window).height() - position.top - link.height();

bence

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div>Testing</div>
<div id="result" style="margin:1em 4em; background:rgb(200,200,255); height:500px"></div>
<div style="background:rgb(200,255,200); height:3000px; width:5000px;"></div>

<script>
(function(){
    var link=$("#result");

    var top = link.offset().top; // position from $(document).offset().top
    var bottom = top + link.height(); // position from $(document).offset().top

    var left = link.offset().left; // position from $(document).offset().left
    var right = left + link.width(); // position from $(document).offset().left

    var bottomFromBottom = $(document).height() - bottom;
    // distance from document's bottom
    var rightFromRight = $(document).width() - right;
    // distance from document's right

    var str="";
    str+="top: "+top+"<br>";
    str+="bottom: "+bottom+"<br>";
    str+="left: "+left+"<br>";
    str+="right: "+right+"<br>";
    str+="bottomFromBottom: "+bottomFromBottom+"<br>";
    str+="rightFromRight: "+rightFromRight+"<br>";
    link.html(str);
})();
</script>

Sonuç

top: 44
bottom: 544
left: 72
right: 1277
bottomFromBottom: 3068
rightFromRight: 3731

benim krom tarayıcımda.

Belge kaydırılabilir olduğunda, $(window).height()kaydırmada bazı bölümleri gizlenen belgenin genişliğini değil, tarayıcı görünüm alanının yüksekliğini döndürür. Http://api.jquery.com/height/ adresine bakın .

İşte sayfadaki herhangi bir sınıf veya kimliğin bir nesnesini döndüren bir jquery işlevi.

var elementPosition = function(idClass) {
            var element = $(idClass);
            var offset = element.offset();

            return {
                'top': offset.top,
                'right': offset.left + element.outerWidth(),
                'bottom': offset.top + element.outerHeight(),
                'left': offset.left,
            };
        };


        console.log(elementPosition('#my-class-or-id'));

Vanilla Javascript Cevap

var c = document.getElementById("myElement").getBoundingClientRect();
var bot = c.bottom;
var rgt = c.right;

Açık olmak gerekirse, ona bir kimlik <img> <div> <p>vb. Atadığınız sürece öğe herhangi bir şey olabilir

Örneğin

<img
    id='myElement'
    src='/img/logout.png'
    className='logoutImg img-button'
    alt='Logout'
/>