Holen Sie sich die untere und rechte Position eines Elements

Ich versuche, die Position eines Elements innerhalb des Fensters wie folgt zu ermitteln:

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;

Allerdings haben die unteren und rechten -vor sich ... Warum ist das so? Da die Zahlen korrekt sind, sollten sie NICHT minus sein.

Anstatt

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

Warum machst du das nicht?

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

Bearbeiten: Ihr Fehler ist, dass Sie tun

bottom = offset.top - bottom;

anstatt

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

var link = $ (Element);
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');

Dadurch wird der Abstand vom oberen und linken Rand Ihres Ansichtsfensters bis zur exakten Kante Ihres Elements und nichts darüber hinaus ermittelt. Angenommen, Ihr Logo hatte eine Größe von 350 Pixel und einen linken Rand von 50 Pixel. Die Variable "rechts" enthält einen Wert von 400, da dies der tatsächliche Abstand in Pixel ist, der erforderlich ist, um an den Rand Ihres Elements zu gelangen, unabhängig davon, ob Sie mehr Polsterung haben oder Rand rechts davon.

Wenn Ihre CSS-Eigenschaft für die Boxgröße auf "Rahmen" festgelegt ist, funktioniert sie weiterhin so, als wäre sie als Standardinhaltsfeld festgelegt worden.

Sie können die Verwendung .position () für diese

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

Ich denke

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

Das Ergebnis ist

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

in Chrome Browser von mir.

Wenn das Dokument scrollbar ist, wird $(window).height()die Höhe des Browser-Ansichtsfensters zurückgegeben, nicht die Breite des Dokuments, dessen Teile im Bildlauf ausgeblendet sind. Siehe http://api.jquery.com/height/ .

Hier ist eine Abfragefunktion, die ein Objekt einer beliebigen Klasse oder ID auf der Seite zurückgibt

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

Vanille Javascript Antwort

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

Um klar zu sein, kann das Element alles sein, solange Sie ihm eine ID <img> <div> <p>usw. zugewiesen haben .

zum Beispiel

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