خاصية offsetWidth HTML DOM
مثال
احصل على ارتفاع وعرض عنصر <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";
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تُرجع الخاصية offsetWidth العرض القابل للعرض لعنصر بالبكسل ، بما في ذلك المساحة المتروكة والحدود وشريط التمرير ، ولكن ليس الهامش.
السبب في تحديد الكلمة "القابلة للعرض" هو أنه إذا كان محتوى العنصر أكبر من العرض الفعلي للعنصر ، فإن هذه الخاصية ستعيد فقط العرض المرئي (راجع "مزيد من الأمثلة").
ملاحظة: لفهم هذه الخاصية ، يجب أن تفهم CSS Box Model .
نصيحة: تُستخدم هذه الخاصية غالبًا مع خاصية offsetHeight .
تلميح: استخدم خاصيتي clientHeight و clientWidth لإرجاع الارتفاع والعرض اللذين يمكن عرضهما لعنصر ، بما في ذلك المساحة المتروكة فقط.
نصيحة: لإضافة أشرطة التمرير إلى عنصر ، استخدم خاصية CSS overflow .
هذه الخاصيه للقراؤه فقط.
دعم المتصفح
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
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";
مثال
يوضح هذا المثال الفرق بين 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";