javascript - জনক - html কি



একটি এইচটিএমএল উপাদান অবস্থান(এক্স, ওয়াই) পুনরুদ্ধার (16)

আমি জানতে চাই যে এইচটিএমএল উপাদানের X এবং Y অবস্থান জাভাস্ক্রিপ্টে যেমন img এবং div


Answer #1

বাম এবং শীর্ষ সম্মান ডিভি অবস্থান পান

  var elm = $('#div_id');  //get the div
  var posY_top = elm.offset().top;  //get the position from top
  var posX_left = elm.offset().left; //get the position from left 

Answer #2

jQuery .offset() প্রথম উপাদানটির বর্তমান সমন্বয়গুলি পাবে, বা ডকুমেন্টের সাথে মিলিত উপাদানগুলির সেটে প্রতিটি উপাদানটির সমন্বয় সেট করবে।


Answer #3

অনেক গবেষণা এবং পরীক্ষার পর এই কাজ বলে মনে হয়

function getPosition(e) {
    var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
    var x = 0, y = 0;
    while (e) {
        x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
        y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return { x: x + window.scrollX, y: y + window.scrollY };
}

http://jsbin.com/xuvovalifo/edit?html,js,output


Answer #4

আপনি Element.prototype দুটি Element.prototype যোগ করতে পারেন যে কোনও উপাদানটির শীর্ষ / বামে পেতে।

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

এটি এভাবে বলা হয়:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

এখানে jQuery এর offset().top এবং .left ফলাফলগুলির তুলনা করে একটি ডেমো .left : http://jsfiddle.net/ThinkingStiff/3G7EZ/


Answer #5

আপনি যদি jQuery ব্যবহার করছেন, এটি একটি সহজ সমাধান হতে পারে:

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

Answer #6

আপনি যদি এটি শুধুমাত্র জাভাস্ক্রিপ্ট সম্পন্ন করতে চান। এখানে এক liners হয় । তার সহজ এবং সহজ ব্যবহার পেতে BoundingClientRect ()

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

প্রথম লাইন offsetLeft দস্তাবেজ সম্পর্কিত এক্স বলতে হবে

এবং দ্বিতীয় লাইন offsetTop ডকুমেন্টের Y আপেক্ষিক বলতে হবে

element.getBoundingClientRect() একটি জাভাস্ক্রিপ্ট ফাংশন যা উইন্ডোটির ভিউপোর্টের সাথে সম্পর্কিত উপাদানটির অবস্থান প্রত্যাবর্তন করে।


Answer #7

আমি এটা ভালো লেগেছে তাই এটি পুরানো ব্রাউজার সঙ্গে ক্রস-সামঞ্জস্যপূর্ণ ছিল।

// For really old browser's or incompatible ones
    function getOffsetSum(elem) {
        var top = 0,
            left = 0,
            bottom = 0,
            right = 0

         var width = elem.offsetWidth;
         var height = elem.offsetHeight;

        while (elem) {
            top += elem.offsetTop;
            left += elem.offsetLeft;
            elem = elem.offsetParent;
        }

         right = left + width;
         bottom = top + height;

        return {
            top: top,
            left: left,
            bottom: bottom,
            right: right,
        }
    }

    function getOffsetRect(elem) {
        var box = elem.getBoundingClientRect();

        var body = document.body;
        var docElem = document.documentElement;

        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

        var clientTop = docElem.clientTop;
        var clientLeft = docElem.clientLeft;


        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        var bottom = top + (box.bottom - box.top);
        var right = left + (box.right - box.left);

        return {
            top: Math.round(top),
            left: Math.round(left),
            bottom: Math.round(bottom),
            right: Math.round(right),
        }
    }

    function getOffset(elem) {
        if (elem) {
            if (elem.getBoundingClientRect) {
                return getOffsetRect(elem);
            } else { // old browser
                return getOffsetSum(elem);
            }
        } else
            return null;
    }

এখানে জাভাস্ক্রিপ্ট মধ্যে সমন্বয় সম্পর্কে আরো: http://javascript.info/tutorial/coordinates


Answer #8

আমি খুঁজে পাওয়া সবচেয়ে পরিষ্কার পদ্ধতি jQuery এর offset দ্বারা ব্যবহৃত কৌশলটির একটি সরলীকৃত সংস্করণ। অন্যান্য উত্তরগুলির অনুরূপ এটি getBoundingClientRect দিয়ে শুরু হয়; এটি স্ক্রোল পজিশনের জন্য সামঞ্জস্য করার জন্য body মার্জিনের মতো জিনিসগুলি (প্রায়শই ডিফল্ট) window এবং documentElement ব্যবহার করে।

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els = document.getElementsByTagName("div");
var docEl = document.documentElement;

for (var i = 0; i < els.length; i++) {

  var rect = els[i].getBoundingClientRect();

  var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

  els[i].innerHTML = "<b>" + rectLeft + ", " + rectTop + "</b>";
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}
#rel {
  position: relative;
  left: 10px;
  top: 10px;
}
#abs {
  position: absolute;
  top: 250px;
  left: 250px;
}
<div id="rel"></div>
<div id="abs"></div>
<div></div>


Answer #9

এইটি আমি তৈরি করতে পরিচালিত সেরা কোড (জাভাস্ক্রিপ্ট অফসেট ()) এর বিপরীতে আইফ্রেমগুলিতেও কাজ করে। Webkit একটি ভিন্ন আচরণ একটি বিট মনে হয়।

মউউয়ের মন্তব্যের উপর ভিত্তি করে:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}

Answer #10

এইরকম কিছু কীভাবে উপাদানটির আইডি পাস করে এবং এটি বাম বা উপরে ফিরে আসবে, আমরা তাদের একত্রিত করতে পারি:

1) বাম খুঁজে

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) শীর্ষ খুঁজে

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

অথবা 3) একসঙ্গে বাম এবং শীর্ষ খুঁজে

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

Answer #11

এটি আমার জন্য কাজ করেছে (সর্বোচ্চ ভোট দেওয়া উত্তর থেকে সংশোধিত):

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

এই ব্যবহার করে আমরা কল করতে পারেন

getOffset(element).left

অথবা

getOffset(element).top

Answer #12

ছোট এবং সামান্য মধ্যে পার্থক্য

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

একটি উদাহরণ সমন্বয় দেখুন: http://javascript.info/tutorial/coordinates


Answer #13

যদি পৃষ্ঠাটি অন্তর্ভুক্ত থাকে - অন্তত- যে কোনও "DIV", মেউউ দ্বারা প্রদত্ত ফাংশনটি বর্তমান পৃষ্ঠার সীমা অতিক্রম করে "Y" মানটি ছুঁড়ে ফেলে। সঠিক অবস্থানটি সন্ধান করার জন্য, আপনাকে অফসেটের পিতামাতার এবং পিতামাতার নন-এর উভয়ই পরিচালনা করতে হবে।

নিচের কোডটি চেষ্টা করুন (এটি FF2 এর জন্য চেক করা আছে):


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

Answer #14

যদিও এগুলি অনেকগুলি উত্তরগুলির নীচে হারিয়ে যাওয়া খুব সম্ভবত, এখানে শীর্ষ সমাধানগুলি আমার জন্য কাজ করছে না।
যতদূর পর্যন্ত আমি বলতে পারতাম না অন্য কোনও উত্তর সাহায্য করবে।

পরিস্থিতি :
একটি HTML5 পৃষ্ঠায় আমার একটি মেনু ছিল যা হেডারের ভিতরে একটি নেভি উপাদান ছিল (শিরোনাম নয় তবে অন্য উপাদানের শিরোনাম)।
ব্যবহারকারী একবার স্ক্রোল করার পরে ন্যাভিগেশনটি উপরের দিকে আটকাতে চেয়েছিলেন, কিন্তু এর আগে এটির শিরোনামটি সম্পূর্ণ স্থির ছিল (তাই আমি এটি সামান্য অন্য কিছুকে ওভারলে করতে পারতাম)।
উপরের সমাধানগুলি কোনও পরিবর্তনকে ট্রিগার করেনি কারণ .offsetTop এটি একটি সম্পূর্ণ অবস্থানের উপাদান হিসাবে পরিবর্তন করতে যাচ্ছে না। উপরন্তু .scrollTop সম্পত্তিটি কেবলমাত্র সর্বাধিক উপাদানগুলির শীর্ষে ছিল ... যা 0 বলে এবং সর্বদা 0 হবে।
যে কোন পরীক্ষা আমি এই দুইটি ব্যবহার করে সম্পাদন করেছি (এবং getBoundingClientRect ফলাফলগুলির সাথে) যেটি নেভিগেশান বারের শীর্ষে দৃশ্যমান পৃষ্ঠার শীর্ষে স্ক্রোল করা হয়েছে কিনা তা আমাকে জানাবে না (আবার, যেমন কনসোলে রিপোর্ট করা হয়েছে, ততক্ষণ স্ক্রোল করার সময় তারা একই নম্বরগুলিতে রয়ে গেছে) ঘটেছে)।

সমাধান
আমার জন্য সমাধান ব্যবহার করা হয়

window.visualViewport.pageTop

পৃষ্ঠার মানটি মানটি স্ক্রিনের দৃশ্যমান অংশকে প্রতিফলিত করে, তাই দর্শনীয় এলাকাগুলির সীমানাগুলির রেফারেন্সে কোন উপাদানটি কোথায় থাকে তা আমাকে ট্র্যাক করার অনুমতি দেয়।

সম্ভবত স্ক্রোলিংয়ের সাথে আমি কোনও সময় আচরণ করছি, বলতে অযৌক্তিক, আমি এই সমাধানটি ব্যবহার করার আশা করি যা স্ক্রোল করা উপাদানগুলি আন্দোলনের প্রতিক্রিয়াশীলভাবে সাড়া দেবে।
এটা অন্য কেউ সাহায্য আশা করি।
গুরুত্বপূর্ণ নোট: এটি বর্তমানে Chrome এবং Opera এ কাজ করছে এবং নিশ্চিতভাবে ফায়ারফক্সে নয় (6-2018) ... যতক্ষণ না ফায়ারফক্স ভিজ্যুয়াল ভিউউপোর্ট সমর্থন করে, আমি এই পদ্ধতিটি ব্যবহার করার পরামর্শ দিই না (এবং আমি আশা করি তারা শীঘ্রই তা করবে ... এটি অনেক কিছু করে বিশ্রাম চেয়ে আরো ইন্দ্রিয়)।


হালনাগাদ:
এই সমাধান সংক্রান্ত শুধু একটি নোট।
আমি এখনও আবিষ্কার করেছি যে আমি যা আবিষ্কার করেছি তা অত্যন্ত মূল্যবান বলে মনে হচ্ছে যেখানে "... স্ক্রোল করা উপাদানগুলি চলাকালীন প্রোগ্রামটির প্রতিক্রিয়াশীল প্রতিক্রিয়া।" প্রযোজ্য সিএসএস ব্যবহার করার জন্য সিএসএস ব্যবহার করার সমস্যাটি আমার জন্য ভাল সমাধান : উপাদানটির উপর স্টিকি । স্টিকি ব্যবহার করে আপনি জাভাস্ক্রিপ্ট ব্যবহার না করে শীর্ষে থাকতে পারেন। (দ্রষ্টব্য: বার বার এটি উপাদানটিকে স্থির করার পরিবর্তে কার্যকরীভাবে কাজ করবে না তবে বেশিরভাগ ব্যবহারের জন্য চটচটে পদ্ধতি সম্ভবত উচ্চতর হবে)

UPDATE01:
তাই আমি উপলব্ধি করেছিলাম যে একটি ভিন্ন পৃষ্ঠার জন্য আমার একটি প্রয়োজনীয়তা ছিল যেখানে আমি একটি হালকা জটিল স্ক্রোলিং সেটআপ (উপাদানটির অংশ হিসাবে অতীত স্ক্রোল করে এমন উপাদানগুলি প্যারাল্যাক্সের উপাদানগুলি) -এ একটি উপাদানটির অবস্থান সনাক্ত করার প্রয়োজন ছিল। আমি সেই দৃশ্যকল্পে উপলব্ধি করেছিলাম যে নিম্নলিখিতটি যখন আমি কিছু করার সময় নির্ধারণ করার জন্য ব্যবহার করেছি:

  let bodyElement = document.getElementsByTagName('body')[0];
  let elementToTrack = bodyElement.querySelector('.trackme');
  trackedObjPos = elementToTrack.getBoundingClientRect().top;
  if(trackedObjPos > 264)
  {
    bodyElement.style.cssText = '';
  }

এই উত্তর এখন আরও ব্যাপকভাবে দরকারী আশা করি।


Answer #15

সঠিক পদ্ধতিটি হল element.getBoundingClientRect() ব্যবহার করা হল:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

ইন্টারনেট এক্সপ্লোরারটি যেহেতু আপনার যত্ন নিতে পারে সেক্ষেত্রে এটির সমর্থনে এটি সমর্থিত হয়েছে এবং এটি অবশেষে CSSOM দৃশ্যগুলিতে মানচিত্রে পরিণত হয়েছে। অন্যান্য সমস্ত ব্রাউজার এটি একটি দীর্ঘ সময় আগে গৃহীত।

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

element.getBoundingClientRect() দ্বারা ফেরত মান ভিউপোর্টের আপেক্ষিক। যদি আপনি অন্য উপাদানটির সাথে সম্পর্কিত এটির প্রয়োজন হয়, তবে অন্যটি একটি আয়তক্ষেত্রকে কেবলমাত্র বিয়োগ করুন:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Answer #16

সর্বাধিক ব্রাউজারে এইচটিএমএল উপাদান থাকবে: -

offsetLeft
offsetTop

এগুলি লেআউট রয়েছে এমন নিকটতম পিতামাতার উপাদানটির অবস্থান নির্দিষ্ট করে। এই পিতা বা মাতা প্রায়ই অফসেট মূল সম্পত্তি bif অ্যাক্সেস করা যেতে পারে।

IE এবং FF3 আছে

clientLeft
clientTop

এই বৈশিষ্ট্যগুলি কম সাধারণ, তারা তার পিতামাতার ক্লায়েন্ট এলাকার সাথে একটি উপাদান অবস্থান নির্দিষ্ট করে (প্যাডেড এলাকাটি ক্লায়েন্ট এলাকার অংশ তবে সীমানা এবং মার্জিন নয়)।





position