একটি ডিভ / স্প্যান ট্যাগের অবস্থান পান

Question

কেউ নির্দিষ্ট করে না থাকলে কীভাবে আমাকে বা উপাদানটির অবস্থান topও leftঅবস্থান পেতে পারেন ?divspan

অর্থাৎ,

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

উপরেরটিতে, যদি আমি করি:

document.getElementById('11a').style.top

এর মান 55pxফেরত দেওয়া হয়। তবে, আমি যদি span'12 এ' এর জন্য চেষ্টা করি তবে কিছুই ফিরে আসে না।

আমার একটি পৃষ্ঠায় div/ spanগুলি রয়েছে যা আমি top/ leftপ্রোপার্টি নির্দিষ্ট করতে পারি না , তবে divসেই উপাদানটির অধীনে আমার সরাসরি প্রদর্শন করা দরকার ।

Answer 1

এই ফাংশনটি আপনাকে পৃষ্ঠার সাথে সম্পর্কিত উপাদানটির x, y অবস্থান বলবে। মূলত আপনাকে সমস্ত উপাদানটির পিতামাতাকে লুপ আপ করতে হবে এবং তাদের অফসেটগুলি একসাথে যুক্ত করতে হবে।

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

তবে, যদি আপনি কেবল তার ধারকটির সাথে সম্পর্কিত উপাদানটির x, y অবস্থানটি চেয়েছিলেন তবে আপনার যা প্রয়োজন তা হ'ল:

var x = el.offsetLeft, y = el.offsetTop;

এটির নীচে কোনও উপাদান রাখার জন্য আপনাকে এর উচ্চতাও জানতে হবে। এটি অফসেটহাইট / অফসেটউইথ সম্পত্তিটিতে সঞ্চয় করা হয়।

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

Comments

দুর্ভাগ্যক্রমে এই পদ্ধতিটি ক্রোমে ব্যর্থ হয় যখন এলিমেন্টটি সীমানা সহ কোনও টেবিলের ভিতরে থাকে। এটি BODY মার্জিনের কারণে আই 6 মানক মোডেও ব্যর্থ হবে।

— ফ্রি

এই কোড ব্যবহারকারীদের জন্য কেবল একটি সতর্কতা। এটি পৃষ্ঠার সাথে সম্পর্কিত এবং উইন্ডোর সাথে নয়। ব্যবহারকারী যদি স্ক্রোলবারগুলি ব্যবহার করে প্রায় স্ক্রোল করে তবে এটি একই মানটি প্রদান করে। সতর্ক হোন.

— আইজাক বলিঞ্জার

ধন্যবাদ @ ইসাকাকোলিংগার এটি কেবল এটি লক্ষ্য করেছেন। কেউ আমাকে বলতে পারেন যে আমি যখন উইন্ডোটির আকার পরিবর্তন করা হয় বা ব্যবহারকারী স্ক্রোল করে তখন মানগুলি কীভাবে পরিবর্তন করতে পারি?

— ডেভিড ফারিয়ানা

@ ডেভিডফারিআ আমি এর জন্য ডোজের জ্যামিতি মডিউল "ডোম-জ্যামিতি" ব্যবহার করেছি। স্থানীয়ভাবে কীভাবে এটি করতে হয় তা আমি জানি না।

— আইজাক বলিঞ্জার

ডাউনভোটেড - এটি আরও অভিজ্ঞ ব্যবহারকারীদের কাছে সুস্পষ্ট হতে পারে তবে এল এর জন্য যা পাস করতে হবে তা আপনি নির্দিষ্ট করেন নি (যেমন দয়া করে একটি নমুনার ব্যবহার সরবরাহ করুন)।

— ম্যাট

Answer 2

আপনি getBoundingClientRect()উপাদানটির একটি রেফারেন্সে পদ্ধতিটি কল করতে পারেন । তারপরে আপনি পরীক্ষা করতে পারেনtop , left, rightএবং / অথবা bottomবিশিষ্টতা ...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

যদি jQuery ব্যবহার করে থাকেন তবে আপনি আরও সংযুক্ত কোড ব্যবহার করতে পারেন ...

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

Comments

এই উত্তরের জন্য +1, getBoundingClientRect()ব্যবহার করা উচিত - এবং এটি গ্রহণযোগ্য উত্তর হওয়া উচিত! তবে এটি কাজ করার জন্য আপনার একটি "আধুনিক ব্রাউজার" দরকার নেই , আমি এখানে দেখিয়েছি এমন সামঞ্জস্যতার তালিকাটি দেখুন: stackoverflow.com/questions/1480133/… । এটি IE 4.0+ (!), ক্রোম 1.0+, এফএফ 3.0+, সাফারি 4.0+ এবং অপেরাতে দুর্দান্ত কাজ করে।

— Sk8erPeter

নোটটি getBoundingClientRect()নয়, ভিউপোর্টের সাথে সম্পর্কিত মানগুলি প্রত্যাখ্যান করে। তার জন্য, আপনি এমন কিছু চাইবেন top = el.getBoundingClientRect().top + window.pageYOffset - el.ownerDocument.documentElement.clientTop।

— জ্যাক ব্লুম

এছাড়াও মনে রাখবেন getBoundingClientRectলাগে transformএকাউন্টে।

— ExpExc

যদি প্রথম অ-একেবারে অবস্থানযুক্ত শিশুটির মার্জিন-শীর্ষ বা মার্জিন-বাম থাকে তবে এটি সঠিক নয়। এই পৃষ্ঠায় বর্তমানে কোনও সঠিক সমাধান নেই তাই যদি কেউ জানেন তবে দয়া করে একটি উত্তর পোস্ট করুন।

— কার্টিস

Answer 3

যখন @ নিকফের উত্তর কাজ করে। আপনি যদি পুরানো ব্রাউজারগুলির জন্য যত্ন না করেন তবে আপনি এই খাঁটি জাভাস্ক্রিপ্ট সংস্করণটি ব্যবহার করতে পারেন। আইই 9 + এবং অন্যান্যতে কাজ করে

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

Answer 4

অ্যালেক্স হিসাবে উল্লেখ করা হয়েছে আপনি ডকুমেন্ট প্রবাহের সাথে সম্পর্কিত অবস্থানটি পেতে jQuery অফসেট () ব্যবহার করতে পারেন। এর x, y এর জন্য প্যারেন্টের তুলনায় স্থানাঙ্কের জন্য অবস্থান () ব্যবহার করুন।

সম্পাদনা: স্যুইচ করা document.readyহয়েছে window.loadকারণ loadসমস্ত উপাদানের জন্য অপেক্ষা করে যাতে আপনি কেবল ডিওএম প্রস্তুত করার পরিবর্তে তাদের আকার পান। আমার অভিজ্ঞতায় loadজাভাস্ক্রিপ্টের অবস্থানগত উপাদানগুলিকে খুব কম ভুল ফলাফল হয়েছে।

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

Answer 5

যে কোনও ব্যক্তির কেবল শীর্ষ বা বাম অবস্থান প্রয়োজন, @ নিকফের পঠনযোগ্য কোডে সামান্য পরিবর্তনগুলি কৌশলটি সম্পাদন করে।

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

এবং

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

Answer 6

আমি বুঝতে পারি এটি একটি পুরানো থ্রেড, তবে @ অ্যালেক্সের উত্তরটির সঠিক উত্তর হিসাবে চিহ্নিত করা দরকার

element.getBoundingClientRect() jQuery এর সাথে হুবহু মিল $(element).offset()

এবং এটির সাথে IE4 ... সামঞ্জস্যপূর্ণ https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Comments

আপনাকে পৃষ্ঠা স্ক্রোল অফসেট অন্তর্ভুক্ত করতে হবে

— বেনিয়ামিন ইন্টাল