استرجاع العرض والارتفاع بعد التحويل

عند تطبيق تحويل مثل التدوير (45 درجة) على عنصر، الأبعاد المرئية لهذا العنصر يتغير. ومع ذلك، لا تزال خصائص العرض والارتفاع في JavaScript تعكس الأبعاد الأصلية غير المحولة.

الحل: استخدام getBoundingClientRect()

للحصول على الأبعاد المحدثة بعد التحويل، استخدم طريقة getBoundingClientRect() على HTMLDOMElement. تُرجع هذه الطريقة كائنًا يحتوي على الارتفاع والعرض المحولين.

مثال:

// 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;

عرض توضيحي:

تفضل بزيارة jsFiddle للحصول على مثال عملي: https://jsfiddle.net/your_url_here

ملاحظة: ستمنحك هذه الطريقة أبعاد العنصر بأكمله، بما في ذلك أي حدود أو حشوة. إذا كنت تريد حساب أبعاد المحتوى فقط، فيجب عليك استخدام offsetWidth وoffsetHeight على عنصر محتوى العنصر (على سبيل المثال،