পিতা বা মাতা ধারকটির তুলনায় উপাদানটির অবস্থান / অফসেট পান?

Question

আমি jQuery সঙ্গে কাজ করতে অভ্যস্ত। আমার বর্তমান প্রকল্পে আমি zepto.js ব্যবহার করি। জেপ্টো position()jQuery এর মতো কোনও পদ্ধতি সরবরাহ করে না । জেপ্টো কেবল সাথে আসে offset()।

খাঁটি জেএস বা জেপ্টো এর সাথে পিতামাতার সাথে সম্পর্কিত কোনও ধারকটির অফসেট কীভাবে আমি পুনরুদ্ধার করতে পারি তার কোনও ধারণা?

Comments

একটি জাভাস্ক্রিপ্ট প্রশ্ন জিজ্ঞাসা করার সময় ডাউন-ভোট দেওয়া একটি jQuery উত্তর (এটি এমনকি jQuery হিসাবে চিহ্নিত করা হয় না!)

— জন

@ জন আপনি জেপ্টো ট্যাগ লক্ষ্য করেছেন?

— সুপারশার্প

@ সুপারশার্প JavaScriptআপনি যখন খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করছেন তখন ট্যাগটি ব্যবহার করুন । আপনি যদি কোনও ফ্রেমওয়ার্ক বা লাইব্রেরি ব্যবহার করেন তবে আপনি ট্যাগটি ব্যবহার করবেন নাJavaScript । যদি আপনার নাম জেফ হয় আমি আপনাকে স্যালি ডাকব না।

— জন

@ জন এটি একটি মতামত, কিন্তু এটি কীভাবে কাজ করে তা নয়। দয়া করে জাভাস্ক্রিপ্ট ট্যাগ গাইডটি পড়ুন। এক্ষেত্রে এটি লাইব্রেরি ট্যাগের সাথে একসাথে ব্যবহার করা উচিত।

— সুপারশার্প

@ সুপারশার্প হ্যাঁ এসও এর মতো অক্ষম; আক্ষরিক ট্যাগ মুদ্রাস্ফীতি। 😒︎

— জন

Answer 1

সতর্কতা: jQuery, মানক জাভাস্ক্রিপ্ট নয়

element.offsetLeftএবং element.offsetTopএর সাথে সম্মিলিতভাবে কোনও উপাদানটির অবস্থান অনুসন্ধানের জন্য খাঁটি জাভাস্ক্রিপ্টের বৈশিষ্ট্য offsetParent; relativeবা এর অবস্থানের সাথে নিকটতম অভিভাবক উপাদান হওয়াabsolute

বিকল্পভাবে, আপনি সর্বদা উপাদান এবং এর পিতামাতার অবস্থান পেতে জেপ্টো ব্যবহার করতে পারেন এবং কেবল দুটি বিয়োগ করতে পারেন:

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

পিতা বা মাতা অবস্থান না থাকলেও আপনাকে তার পিতা-মাতার সাথে সম্পর্কিত সন্তানের অফসেট দেওয়ার সুবিধা রয়েছে।

Comments

এলিমেন্টের অবস্থানগুলি staticপিতামাতাকে অফসেট করে না।

— ইসাইলিজা

ধনুর্বন্ধনী ভিতরে সেমিকোলন ব্যবহার করবেন না, কমা ব্যবহার করুন

— লুকা বোরিওনি

স্থির অবস্থান সম্পর্কে কি? তারা কি পিতামাতাকে অফসেট করে?

— আইয়্যাশ

হ্যাঁ, @ আইয়া-পজিশন স্থির করে একটি নতুন অফসেট প্রসঙ্গ তৈরি করেছে

— মিমিফেরফ

@vsync jQuery কোনও কিছুর রাজা নন যেহেতু জানুয়ারী ২০১ 2016 এ IE9 ইওএল পৌঁছেছে, আমাদের সমস্ত বড় ব্রাউজারে একটি মানকৃত ডোম নির্বাচন রয়েছে, খাঁটি জেএস শিখুন। এছাড়াও কোন কাঠামোটি ব্যবহার করবেন সে সম্পর্কেও মতামতের এসও তে কোনও স্থান নেই, কারণ এটি প্রকল্প এবং লক্ষ্য প্ল্যাটফর্মের উপর নির্ভর করে he

— হ্যান্স কোচ

Answer 2

খাঁটি জেএসে কেবল ব্যবহার offsetLeftএবং offsetTopবৈশিষ্ট্য।
ফিডল উদাহরণ: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

Comments

ধন্যবাদ. পিতা-মাতার উপাদানটি অফসেট পাওয়ার কোনও উপায় কি?

— ম্যাট

p.offsetTop + p.parentNode.offsetTopআপনি পিপিকে যেমন কয়েক বছর আগে প্রস্তাব করেছিলেন ঠিক তেমন একটি পুনরাবৃত্তির ক্রিয়াকলাপে এটি মোড়তে পারে । আপনি স্তরটি উপরে যেতে সংখ্যাটি পাস করতে বা নকল করতে কোনও নির্বাচককে ব্যবহার করতে ফাংশনটি পরিবর্তন করতে পারেন $(selector).parents(parentSelector)। আমি এই সমাধানটি পছন্দ করব কারণ জেপ্টো বাস্তবায়ন কেবল সমর্থনকারী ব্রাউজারগুলিতে কাজ করে getBoundingClientsRect- যা কিছু মোবাইল ব্যবহার করে না।

— টর্স্টেন ওয়াল্টার

আমি ভেবেছিলাম getBoundingClientsRectব্যাপকভাবে সমর্থিত ... যদি কেউ জানেন যে কোন মোবাইলগুলি এটিকে সমর্থন করে না তবে আমি আগ্রহী (এটি সম্পর্কে মোবাইলগুলির জন্য কোনও সমর্থন টেবিলটি খুঁজে পাচ্ছি না)।

— নোবিটা

এটি চিহ্নিত না হলেও এটি সম্ভবত সবচেয়ে সঠিক উত্তর। আমার ব্যক্তিগত সমাধানটি পরিবর্তিত $(this).offset().leftহয়েছিল this.offsetLeft।

— অ্যাডউইলি

এটি jQuery.position()3 ডি রূপান্তরিত পিতামাতার ভিতরে থাকা ভুল আচরণও ঠিক করে দেয় , আপনাকে অনেক ধন্যবাদ!

— রসোহ

Answer 3

আমি এটি ইন্টারনেট এক্সপ্লোরারে এটির মতো করেছিলাম।

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };
    // relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;
    // now we will calculate according to the current document, this current
    // document might be same as the document of target field or it may be
    // parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

==================== আপনি এটিকে কল করতে পারেন

getWindowRelativeOffset(top, inputElement);

আমি শুধুমাত্র আমার ফোকাস অনুযায়ী IE তে ফোকাস করি তবে অন্যান্য ব্রাউজারগুলির জন্যও একই জিনিস করা যেতে পারে।

Answer 4

ইভেন্টের পরম অফসেট পজিশনটি পেতে ইভেন্টের অফসেটটিকে প্যারেন্ট এলিমেন্টে অফসেটে যুক্ত করুন।

একটি উদাহরণ :

HTMLElement.addEventListener('mousedown',function(e){

    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    if( e.target != this ){ // 'this' is our HTMLElement

        offsetX = e.target.offsetLeft + e.offsetX;
        offsetY = e.target.offsetTop + e.offsetY;

    }
}

ইভেন্টের লক্ষ্যটি যখন ইভেন্টটির নিবন্ধভুক্ত হয় না তখন এটি "পরম" অফসেট মান গণনা করার জন্য পিতামাতার অফসেটটিকে বর্তমান ইভেন্টের অফসেটে যুক্ত করে।

মজিলা ওয়েব এপিআই অনুসারে: " এইচটিএমলেলেট.অফসেটলফ্ট রিড- ওনলি পঠিত সম্পত্তিটি এইচটিএমলেলেট.অফসেট প্যারেন্ট নোডের মধ্যে বাম দিকে বর্তমান উপাদানটির উপরের বাম কোণে অফসেট করা পিক্সেলের সংখ্যা প্রদান করে । "

এটি বেশিরভাগ ক্ষেত্রে ঘটে যখন আপনি কোনও পিতামাতার উপর এমন একটি ইভেন্ট নিবন্ধভুক্ত করেন যেখানে আরও বেশ কয়েকটি শিশু থাকে, উদাহরণস্বরূপ: একটি অভ্যন্তরীণ আইকন বা পাঠ্য স্প্যান সহ একটি বোতাম, liঅভ্যন্তরীণ স্প্যানগুলির সাথে একটি উপাদান। ইত্যাদি ...

Comments

পিতা বা মাতার কি হবে? স্ক্রোলবারযুক্ত নেস্টেড উপাদানগুলি সম্পর্কে কী? ডিসপ্লে সহ পূর্ববর্তী উপাদানগুলি সম্পর্কে কী? একটি সত্য ডকুমেন্ট অফসেট অবস্থান গণনা করা প্রায় অসম্ভব, তবুও রেন্ডারিং ইঞ্জিন এটি জানতে পারে। ডকুমেন্ট পজিশনের মতো খুব খারাপ সাধারণ বৈশিষ্ট্যগুলি কখনই ডোমে অন্তর্ভুক্ত ছিল না।

— ডেভিড স্পেকটার

@ ডেভিডস্পেক্টর শব্দ

Answer 5

উদাহরণ

সুতরাং, যদি আমাদের "চাইল্ড-এলিমেন্ট" এর আইডি সহ কোনও শিশু উপাদান থাকে এবং আমরা এটি পিতামাতার সাথে তুলনামূলকভাবে বাম / শীর্ষ অবস্থান পেতে চাই, "আইটেম-প্যারেন্ট" শ্রেণীর একটি ডিভ বলি, আমরা চাই এই কোড ব্যবহার করুন।

var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);

প্লাগইন অবশেষে, আসল প্লাগইনটির জন্য (কী চলছে তা বোঝাতে কয়েকটি নোট সহ):

// offsetRelative (or, if you prefer, positionRelative)
(function($){
    $.fn.offsetRelative = function(top){
        var $this = $(this);
        var $parent = $this.offsetParent();
        var offset = $this.position();
        if(!top) return offset; // Didn't pass a 'top' element 
        else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document
        else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to 
        else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to 
        else { // Get parent's relative offset
            var parent_offset = $parent.offsetRelative(top);
            offset.top += parent_offset.top;
            offset.left += parent_offset.left;
            return offset;
        }
    };
    $.fn.positionRelative = function(top){
        return $(this).offsetRelative(top);
    };
}(jQuery));

নোট: আপনি ব্যবহার করতে পারেন এই mouseClick বা মাউসওভার ইভেন্টে

$(this).offsetRelative("div.item-parent");

Comments

আমি স্ক্রোলিং এর জন্য হিসাব দেখছি না। প্রচুর অদ্ভুত ঘটনা ঘটতে পারে।

— ডেভিড স্পেক্টর

Answer 6

আমি আরেকটি সমাধান পেয়েছি। সন্তানের সম্পত্তি মান থেকে পিতামাতার সম্পত্তি মান বিয়োগ করুন

$('child-div').offset().top - $('parent-div').offset().top;

Answer 7

শিওর খাঁটি জেএসের সাথে সহজ, ঠিক এটি করুন, ফিক্সড এবং অ্যানিমেটেড এইচটিএমএল 5 প্যানেলের জন্যও কাজ করুন, আমি এই কোডটি তৈরি করে দেখি এবং এটি যে কোনও ব্রাউজারের জন্য কাজ করে (IE 8 অন্তর্ভুক্ত):

<script type="text/javascript">
    function fGetCSSProperty(s, e) {
        try { return s.currentStyle ? s.currentStyle[e] : window.getComputedStyle(s)[e]; }
        catch (x) { return null; } 
    }
    function fGetOffSetParent(s) {
        var a = s.offsetParent || document.body;

        while (a && a.tagName && a != document.body && fGetCSSProperty(a, 'position') == 'static')
            a = a.offsetParent;
        return a;
    }
    function GetPosition(s) {
        var b = fGetOffSetParent(s);

        return { Left: (b.offsetLeft + s.offsetLeft), Top: (b.offsetTop + s.offsetTop) };
    }    
</script>

Comments

আপনি পিতামাতা নোড এবং উপাদান বৈশিষ্ট্যগুলির সমস্ত সম্ভাব্য কেস দিয়ে পরীক্ষা করেছেন? এই অ্যাকাউন্টটি কী স্ক্রোলিং এবং নেস্টেড স্ক্রোলিংয়ের জন্য?

— ডেভিড স্পেক্টর