خصائص clientWidth في HTML DOM

مثلث عنصر DOM HTML

clientWidthخصائص فقط يمكن العودة إلى عرض العنصر المرئي (بونكات) بما في ذلك الت填充، وليس الحواف، الهوامش والشريط العرضي العمودي (إذا كان موجودًا).

معدل clientWidth كما يلي: CSS width + CSS padding - عرض الشريط العرضي العمودي (إذا كان موجودًا).

للتفهم هذه الخاصية، يجب أن تعرفنموذج الصندوق CSS.

استخدامoffsetWidthيمكن للخصائص العودة إلى عرض العنصر المرئي، بما في ذلك الت填充، الحواف والشريط العرضي العمودي (إذا كان موجودًا).

النحو:

element.clientWidth

var elem = document.querySelector("div");
var txt = \
txt += \

توافق المتصفحات

يدعم جميع المتصفحات خصائص clientWidth بشكل كامل:

تفاصيل تقنية

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

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

var elem = document.querySelector("div");
var txt = "عرض يتضمن الحشو: " + elem.clientWidth + "px<br>";
txt += "عرض يتضمن الحشو + الحواف: " + elem.offsetWidth + "px";

مراجع ذات صلة

مرجع DOM HTML:خصائص offsetWidth DOM HTML

مرجع DOM HTML:خصائص scrollWidth DOM HTML

مرجع CSS:خصائص CSS overflow

مثلث عنصر DOM HTML