Nhận vị trí dưới cùng và bên phải của một phần tử

Tôi đang cố gắng lấy vị trí của một phần tử trong cửa sổ như sau:

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;

Tuy nhiên phía dưới và bên phải có -trước mặt họ ... Tại sao lại như vậy? vì các con số là đúng, chúng KHÔNG được trừ.

Thay vì

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

Tại sao bạn không làm

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

Chỉnh sửa: Sai lầm của bạn là bạn đang làm

bottom = offset.top - bottom;

thay vì

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

var link = $ (phần tử);
var offset = link.offset ();

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

var bottom = top + link.outerHeight ();
var right = left + 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');

Điều này sẽ tìm thấy khoảng cách từ trên cùng và bên trái của khung nhìn đến cạnh chính xác của phần tử của bạn và không có gì ngoài khoảng đó. Vì vậy, giả sử biểu trưng của bạn là 350px và nó có lề trái là 50px, biến 'phải' sẽ có giá trị là 400 vì đó là khoảng cách thực tế tính bằng pixel mà nó cần để đến mép phần tử của bạn, bất kể bạn có nhiều đệm hơn không hoặc lề bên phải của nó.

Nếu thuộc tính CSS định kích thước hộp của bạn được đặt thành hộp viền, nó sẽ tiếp tục hoạt động giống như được đặt làm hộp nội dung mặc định.

Bạn có thể sử dụng .position () cho việc này

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();

tôi nghĩ

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

Kết quả là

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

trong trình duyệt chrome của tôi.

Khi tài liệu có thể cuộn, $(window).height()trả về chiều cao của khung nhìn trình duyệt, không phải chiều rộng của tài liệu mà một số phần bị ẩn trong cuộn. Xem http://api.jquery.com/height/ .

Đây là một hàm jquery trả về một đối tượng của bất kỳ lớp hoặc id nào trên trang

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'));

Câu trả lời về Javascript của Vanilla

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

Để rõ ràng, phần tử có thể là bất kỳ thứ gì miễn là bạn đã cấp một id cho nó <img> <div> <p> v.v.

ví dụ

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