أحدث البرامج التعليمية وتطوير الشبكة
 

HTML DOM offsetHeight Propery

<كائن العنصر

مثال

الحصول على الطول والعرض ل <div> العنصر، بما في ذلك الحشو والحدود:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

وستكون النتيجة من النص على النحو التالي:

Height with padding and border: 280px
Width with padding and border: 430px
انها محاولة لنفسك »

أكثر "Try it Yourself" الأمثلة أدناه.

تعريف والاستخدام

الخاصية offsetHeight ترجع ارتفاع للعرض عنصر بالبكسل، بما في ذلك الحشو، والحدود والتمرير، ولكن ليس الهامش.

السبب في أن "viewable" تم تحديد كلمة، هو أنه إذا كان محتوى العنصر هو اطول من الارتفاع الفعلي للعنصر، هذا العقار سيعود فقط الارتفاع الذي يكون مرئيا (See "More Examples") .

ملاحظة: لفهم هذه الخاصية، يجب أن نفهم نموذج صندوق CSS .

نصيحة: غالبا ما يتم استخدام هذه الخاصية مع offsetWidth الممتلكات.

نصيحة: استخدم clientHeight و clientWidth خصائص للعودة الارتفاع للعرض وعرض عنصر، فقط بما في ذلك الحشو.

نصيحة: لإضافة التمرير إلى عنصر، استخدم CSS تجاوز الممتلكات.

هذه الخاصيه للقراؤه فقط.

دعم المتصفح

خاصية
offsetHeight نعم فعلا نعم فعلا نعم فعلا نعم فعلا نعم فعلا

بناء الجملة

element .offsetHeight

تفاصيل تقنية

قيمة الإرجاع: الرقم، يمثل ارتفاع للعرض عنصر بالبكسل، بما في ذلك الحشو، والحدود والتمرير
أمثلة

مزيد من الأمثلة

مثال

يوضح هذا المثال الفرق بين clientHeight / clientWidth وoffsetHeight / offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

وستكون النتيجة من النص على النحو التالي:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
انها محاولة لنفسك »

مثال

يوضح هذا المثال الفرق بين clientHeight / clientWidth وoffsetHeight / offsetWidth، وعندما نضيف شريط التمرير إلى العنصر:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

وستكون النتيجة من النص على النحو التالي:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
انها محاولة لنفسك »

<كائن العنصر