ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে একটি ডিভের প্রস্থ কীভাবে পাবেন?

Question

আপনি jQuery এর মতো লাইব্রেরি ব্যবহার না করে <div>ক্রসের ব্রাউজারের সামঞ্জস্যপূর্ণ উপায়ে কোনওটির বর্তমান প্রস্থকে কীভাবে খুঁজে পাবেন ?

Comments

"কোনও জিক্যুয়ারি নয়" মন্তব্যের জন্য +1 :)

— জ্লাতকো

যথাক্রমে অফসেটউইথ, ক্লায়েন্টউইথ, স্ক্রোলউইথ এবং -হাইটের বোঝার সম্ভাব্য সদৃশ (যা সত্যিকার অর্থে অনেক পরে জিজ্ঞাসা করা হয়েছে, তবে এখনও এর আরও বিস্তৃত উত্তর রয়েছে )।

Answer 1

document.getElementById("mydiv").offsetWidth

• এলিমেন্ট.অফসেটউইথ (এমডিসি)

Comments

এটি, বা cientWidth, তবে আমি আসল পার্থক্য জানি না।

— JCOC611

offsetWidthসীমানা প্রস্থ অন্তর্ভুক্ত, clientWidthনা।

— লিঙ্কলঙ্ক

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

— ছিনিয়ে নিন

অফসেটহাইট আইই 11 এ সর্বদা শূন্য

— নিম

@ নিম যদি আপনার ডিভির display: noneনথির অংশ না থাকে বা না থাকে তবে তার সর্বদা উচ্চতা শূন্যের থেকে শূন্য থাকবে।

— অ্যান্ডি ই

Answer 2

আপনি clientWidthবা মজিলা বিকাশকারী নেটওয়ার্ক রেফারেন্স ব্যবহার করতে পারেনoffsetWidth

এটি হবে:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

বা সীমানা প্রস্থ সহ:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

Answer 3

সমস্ত উত্তর সঠিক, তবে আমি এখনও কিছু অন্যান্য বিকল্প দিতে চাই যা কার্যকর হতে পারে।

যদি আপনি নির্ধারিত প্রস্থের সন্ধান করে থাকেন (প্যাডিং, মার্জিন উপেক্ষা করে) তবে আপনি ব্যবহার করতে পারেন।

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputesStyle আপনাকে সেই উপাদানগুলির সমস্ত স্টাইল অ্যাক্সেস করতে দেয়। উদাহরণস্বরূপ: প্যাডিং, প্যাডিং লেফট, মার্জিন, বর্ডার-টপ-বাম-ব্যাসার্ধ এবং আরও কিছু।

Answer 4

ক্লাসনেম ব্যবহার করে আপনি ডিওএমও অনুসন্ধান করতে পারেন। উদাহরণ স্বরূপ:

document.getElementsByClassName("myDiv")

এটি একটি অ্যারে ফিরিয়ে দেবে। যদি কোনও নির্দিষ্ট সম্পত্তি আপনার আগ্রহী থাকে তবে উদাহরণস্বরূপ:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth আপনার ডিভ অ্যারেতে প্রথম উপাদানটির প্রস্থের সমান হবে।

Answer 5

আসলে, আপনি ব্যবহার করতে হবে না document.getElementById("mydiv") ।
আপনি কেবল ডিভের আইডি ব্যবহার করতে পারেন, যেমন:

var w = mydiv.clientWidth;
বা
var w = mydiv.offsetWidth;
ইত্যাদি

Answer 6

আর একটি বিকল্প হ'ল getBoundingClientRect ফাংশনটি ব্যবহার করা। অনুগ্রহ করে নোট করুন যে উপাদানটির প্রদর্শন 'কিছুই না' হলে getBoundingClientRect একটি খালি রেকট ফিরে আসবে।

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

Answer 7

ডিভ বা বডি ট্যাগ নেভিগেশন পদ্ধতিতে কল করুন অনক্লিক = "শো (ইভেন্ট);" ফাংশন শো (ইভেন্ট) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

Answer 8

গণনা শৈলীর সঠিক উপায় পৃষ্ঠাটি রেন্ডার হওয়া পর্যন্ত অপেক্ষা করছে। এটি নিম্নলিখিত পদ্ধতিতে করা যেতে পারে। autoমান পাওয়ার ক্ষেত্রে সময়সীমার দিকে মনোযোগ দিন ।

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

আপনি যদি শুধু ব্যবহার করেন

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

আপনি autoপ্রস্থ এবং উচ্চতার জন্য মানগুলি পেতে পারেন কারণ সম্পূর্ণ লোড সঞ্চালিত না হওয়া পর্যন্ত ব্রাউজারগুলি রেন্ডার করে না।