परिवर्तन के बाद चौड़ाई और ऊंचाई पुनर्प्राप्त करना

किसी तत्व पर रोटेट (45 डिग्री) जैसे परिवर्तन को लागू करते समय, उस तत्व के दृश्य आयाम परिवर्तन। हालाँकि, जावास्क्रिप्ट में चौड़ाई और ऊंचाई के गुण अभी भी मूल अपरिवर्तित आयामों को दर्शाते हैं।

समाधान: getBoundingClientRect()

परिवर्तन के बाद अद्यतन आयाम प्राप्त करने के लिए, HTMLDOMElement पर getBoundingClientRect() विधि। यह विधि रूपांतरित ऊंचाई और चौड़ाई वाली एक वस्तु लौटाती है।

उदाहरण:

// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;

यह विधि आपको किसी भी बॉर्डर या पैडिंग सहित पूरे तत्व के आयाम देगी। यदि आपको केवल सामग्री आयामों की गणना करने की आवश्यकता है, तो आपको तत्व के सामग्री तत्व पर ऑफसेटविड्थ और ऑफसेटहाइट का उपयोग करना चाहिए (उदाहरण के लिए, रूपांतरित तत्व के भीतर