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

HTML DOM offsetWidth 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" الأمثلة أدناه.

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

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

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

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

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

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

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

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

دعم المتصفح

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

بناء الجملة

element .offsetWidth

تفاصيل تقنية

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

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

مثال

يوضح هذا المثال الفرق بين 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
انها محاولة لنفسك »

<كائن العنصر