ویژگی clientWidth HTML DOM Element

تعریف و استفاده

clientWidth ویژگی بازمی‌گردد به عرض视‌گرفته‌ی عنصر، شامل حاشیه‌ها، اما بدون حاشیه‌ها، اسکرول‌بار یا حاشیه‌های بیرونی، به پیکسل محاسبه می‌شود.

clientWidth ویژگی‌ها فقط خوانا هستند.

لطفاً ببینید:آموزش مدل فریم‌بندی CSS

لطفاً ببینید:

ویژگی 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:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی