요소의 아래쪽 및 오른쪽 위치 가져오기

요소의 아래쪽 및 오른쪽 위치 가져오기

창 안에 있는 요소의 위치를 다음과 같이 파악하려고 합니다.

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;

그러나 아래와 오른쪽은-그들 앞에서...왜 이러한가?숫자가 맞으므로 음수가 되면 안 됩니다.

대신에

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

왜 안해요?

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

편집: 당신의 실수는 당신이 하고 있는 것입니다.

bottom = offset.top - bottom;

대신에

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

varlink = $(element);var 오프셋 = link. offset();
var top = offset.top;var left = offset.left;
var bottom = top + link.outer 높이();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');

이렇게 하면 뷰포트의 상단과 왼쪽에서 요소의 정확한 가장자리까지의 거리가 표시되고 그 이상은 표시되지 않습니다.따라서 로고가 350px이고 왼쪽 여백이 50px라고 가정하면 오른쪽에 패딩이 더 많거나 여백이 있어도 요소의 가장자리에 도달하는 데 걸린 실제 거리(픽셀)이기 때문에 변수 '오른쪽'은 400의 값을 유지합니다.

상자 크기의 CSS 속성이 테두리 상자로 설정되어 있으면 기본 내용 상자로 설정된 것처럼 계속 작동합니다.

바닐라 자바스크립트 앤서

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

분명히 말하면 요소는 ID를 할당한 이상 무엇이든 될 수 있습니다.<img> <div> <p>기타.

예를들면

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

이 경우 .position()을 사용할 수 있습니다.

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

여기 페이지에 있는 임의의 클래스 또는 ID의 객체를 반환하는 jquery 함수가 있습니다.

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

생각합니다

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

결과는

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

크롬 브라우저에서.

문서가 스크롤 가능한 경우,$(window).height()일부 부분이 스크롤로 숨겨진 문서의 너비가 아닌 브라우저 뷰포트의 높이를 반환합니다.http://api.jquery.com/height/ 를 참조하십시오.

언급URL : https://stackoverflow.com/questions/9872128/get-bottom-and-right-position-of-an-element