एक तत्व के नीचे और सही स्थिति प्राप्त करें

Question

मैं खिड़की के भीतर एक तत्व की स्थिति प्राप्त करने की कोशिश कर रहा हूँ जैसे:

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;

हालांकि नीचे और दाएं -उनके सामने हैं ... यह क्यों है? संख्या सही होने के कारण उन्हें शून्य से नहीं होना चाहिए।

Answer 1

के बजाय

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;

Answer 2

var लिंक = $ (तत्व);
var ऑफसेट = link.offset ();

var शीर्ष = ऑफसेट.टॉप;
var left = ऑफसेट.लिफ्ट;

var निचला = शीर्ष + link.outerHeight ();
var right = left + link.outerWidth ();

Answer 3

// 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 का मान रखेगा क्योंकि पिक्सेल में वास्तविक दूरी यह आपके तत्व के किनारे तक ले जाती है, भले ही आपके पास अधिक पैडिंग हो। या इसके दाईं ओर मार्जिन।

यदि आपकी बॉक्स-साइज़िंग सीएसएस संपत्ति बॉर्डर-बॉक्स पर सेट है, तो यह ठीक उसी तरह काम करती रहेगी जैसे कि यह डिफ़ॉल्ट सामग्री-बॉक्स के रूप में सेट की गई थी।

Comments

मेरे लिए सबसे अच्छा जवाब!

— जॉय

Answer 4

आप उपयोग कर सकते हैं .स्थिति () इस के लिए

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

Comments

JQuery के दस्तावेज़ में स्थिति () के लिए परिणाम ऑब्जेक्ट में "सही" विशेषता का कोई संदर्भ नहीं है। यहाँ डॉक्टर

— मोर्दक

हाँ, लेकिन यह स्थिति के बजाय ऑफसेट होना चाहिए, दस्तावेज़ के आधार पर ऑफसेट शीर्ष / छोड़ दिया जाता है, स्थिति माता-पिता को संदर्भित करती है।

— मर्दक

@ मॉर्डक, हाँ, लेकिन जैसा कि आप देख सकते हैं कि मैं उपयोग कर रहा हूँ windows.width()और आगे की गणना के लिए भी समान है।

— Starx

स्थिति से सावधान रहें। यह अगर वर्तमान मार्जिन गिनती dosn't

— Andrea_86

Answer 5

मुझे लगता है

<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/ देखें ।

Answer 6

यहाँ एक jquery फंक्शन है जो पेज पर किसी भी क्लास या id का ऑब्जेक्ट देता है

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

Answer 7

वेनिला जावास्क्रिप्ट उत्तर

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

स्पष्ट होने के लिए तत्व कुछ भी हो सकता है जब तक कि आपने उसे एक आईडी आवंटित किया हो <img> <div> <p>आदि।

उदाहरण के लिए

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