خصائص HTML DOM Element clientWidth

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

clientWidth خصائص تعود بالعنصر عرض العرض المرئي، بما في ذلك الهوامش، وليس الظواهر مثل الحواف، أو شريط التمرير، أو الهوامش الخارجية، بالبكسل.

clientWidth خصائص غير قابل للتغيير.

انظر أيضًا:دليل CSS Box Model

انظر أيضًا:

خصائص clientHeight

خصائص clientTop

خصائص clientLeft

خصائص offsetHeight

خصائص offsetWidth

لإضافة شريط التمرير إلى العنصر، استخدم خصائص overflow CSS.

مثال

مثال 1

الحصول على الارتفاع والعرض لـ "myDIV"، بما في ذلك الهوامش:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

جرب بنفسك

مثال 2

مثال 2: فرق clientHeight/clientWidth مع offsetHeight/offsetWidth

بدون شريط التمرير:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

جرب بنفسك

مع وجود شريط التمرير:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

جرب بنفسك

النص

element.clientWidth

القيمة المعدلة

النوع الوصف
الرقم عرض العنصر (بكسل)، بما في ذلك الهوامش.

دعم المتصفح

جميع المتصفحات يدعمونها element.clientWidth:

كروم IE إدج فايرفوكس سفاري أوبرا
كروم IE إدج فايرفوكس سفاري أوبرا
دعم دعم دعم دعم دعم دعم