ال OffsetHeight هي خاصية HTML DOM، والتي تستخدمها لغة البرمجة جافا سكريبت. تقوم بإرجاع الارتفاع المرئي للعنصر بالبكسل الذي يتضمن ارتفاع المحتوى المرئي والحدود والحشوة وشريط التمرير إذا كان موجودًا. غالبًا ما يتم استخدام offsetHeight مع خاصية offsetWidth. ال OffsetWidth هي خاصية أخرى لـ HTML DOM، والتي تشبه تقريبًا ارتفاع الإزاحة. يتم استخدام هذه الخصائص بواسطة JavaScript للعثور على الارتفاع والعرض المرئيين لعناصر HTML.
إن offsetHeight عبارة عن مزيج من عناصر HTML التالية:
offsetHeight = height + border + padding + horizontal scrollbar
من ناحية أخرى، يتضمن OffsetWidth العناصر التالية:
offsetWidth = width + border + padding + vertical scrollbar
تذكر شيئًا واحدًا وهو أن offsetHeight وoffsetWidth لا يتضمنان الهامش، لا الهامش العلوي ولا الهامش السفلي. يتم استخدام خصائص DOM هذه بواسطة لغة برمجة جافا سكريبت لحساب أبعاد عناصر HTML بالبكسل.
بمساعدة الرسم البياني أدناه، يمكنك فهم الإزاحة والارتفاع والإزاحة بشكل أفضل:
دعم المتصفح
الخاصية offsetHeight DOM مدعومة من قبل العديد من متصفحات الويب، مثل Chrome وInternet Explorer. فيما يلي بعض المتصفحات التي تدعم خاصية offsetHeight وoffsetWidth.
preg_match
| المتصفح |  كروم |  متصفح الانترنت |  ثعلب النار |  الأوبرا |  سفاري |  حافة |
| دعم إزاحة الارتفاع | نعم | نعم | نعم | نعم | نعم | نعم |
بناء الجملة
يوجد أدناه بناء جملة بسيط للإزاحة:
element.offsetHeight
هنا، العنصر هو متغير تم إنشاؤه في JavaScript للاحتفاظ بقيم خصائص CSS أو فقرة نص HTML.
إرجاع القيم
يُرجع OffsetHeight وoffsetWidth الارتفاع والعرض المحسوبين لعناصر HTML بالبكسل، على التوالي.
أمثلة
فيما يلي قائمة ببعض الأمثلة. وبمساعدة ذلك سنرى كيف يتم استخدام خاصية offsetHeight وعملها.
مثال 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit انتاج |
انظر الإخراج أدناه الذي يحتوي على فقرة باللون الأصفر المميز، وزر إرسال. انقر على هذا يُقدِّم زر وحساب إزاحة ارتفاع هذه الفقرة.
الإخراج قبل النقر على زر إرسال
مجموعة من الكائنات في جافا
الإخراج بعد النقر على زر إرسال
سيتم عرض الإزاحة المحسوبة داخل هذه المنطقة المميزة باللون الأصفر.
مثال 2
في هذا المثال، سنقوم بحساب ارتفاع الإزاحة للفقرة المقدمة في هذا المثال بالإضافة إلى تصميم CSS. تذكر أن الإزاحة لن تتضمن الهامش.
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight انتاج |
انظر الإخراج أدناه الذي يحتوي على فقرة باللون الوردي المميز وزر الإرسال. انقر على هذا حساب إزاحة الارتفاع زر وحساب إزاحة ارتفاع هذه الفقرة.
الإخراج قبل النقر على زر حساب الإزاحة الارتفاع
الإخراج بعد النقر على زر حساب الإزاحة
سيتم عرض الإزاحة المحسوبة داخل هذه المنطقة المميزة باللون الوردي. في لقطة الشاشة أدناه، يمكنك أن ترى أن ارتفاع الإزاحة للفقرة المحددة هو 230 بكسل.
المثال 3 بدون تصميم CSS
انظر مثال آخر لحساب الإزاحة الارتفاع. لم نقم بتضمين أي نمط CSS مثل الارتفاع والعرض والهامش والحشو وما إلى ذلك، توقع لون الخلفية. لذلك، ستكون الفقرة فقرة بسيطة بدون أي تصميم.
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight انتاج |
أوبونتو الذي الأمر
انظر الإخراج أدناه الذي يحتوي على فقرة باللون البرتقالي المميز وزر إرسال لحساب إزاحة الارتفاع. انقر على هذا حساب إزاحة الارتفاع زر وحساب إزاحة ارتفاع هذه الفقرة.
قبل النقر على زر حساب الإزاحة الارتفاع
بعد النقر على زر حساب الإزاحة
في لقطة الشاشة أدناه، يمكنك أن ترى أن ارتفاع الإزاحة للفقرة المحددة هو 88 بكسل.
حساب كلاً من offsetHeight وoffsetWidth
في هذا المثال، سوف نقوم بحساب كليهما OffsetHeight و OffsetWidth لفقرة داخل علامة تبويب div. لذلك، يمكنك أن تفهم مدى اختلاف حساباتهم. هنا، سوف نستخدم CSS ونمرر الارتفاع والعرض والهامش والحشو وما إلى ذلك للتصميم في هذا المثال.
انسخ الكود أدناه وقم بتشغيله على نظامك لفهمه بشكل أفضل.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit انتاج |
انظر الإخراج أدناه الذي يحتوي على فقرة في منطقة اللون الأزرق الفاتح المميزة وزر إرسال. انقر على هذا يُقدِّم زر وحساب إزاحة الارتفاع وإزاحة عرض هذه الفقرة.
الإخراج قبل النقر على زر إرسال
بعد النقر على يُقدِّم الزر، يبلغ ارتفاع الإزاحة المحسوب 210 بكسل، وعرض الإزاحة 430 بكسل داخل هذه المنطقة المميزة باللون الأزرق الفاتح. انظر الإخراج أدناه.
الإخراج بعد النقر على زر إرسال
لقد رأيت العديد من الأمثلة التي تحتوي على معلمات حسابية مختلفة. في هذه الأمثلة المتنوعة، قمنا بتمرير فقرة النص باستخدام نمط CSS أو بدونه أيضًا ثم قمنا بحساب الإزاحة والارتفاع والإزاحة بشكل منفصل.