বৈশিষ্ট্য clientWidth

বৈশিষ্ট্য clientWidth এ রয়েছে সীমানার ভিতরে এলিমেন্টের প্রস্থ padding সহ, কিন্তু border ছাড়া এবং স্ক্রল বার।

সিনট্যাক্স

javascriptelement.clientWidth;

উদাহরণ

আসুন এলিমেন্টের আকার খুঁজে বের করি:

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

কোড এক্সিকিউশনের ফলাফল:

javascript130

উদাহরণ

যদি এলিমেন্টে স্ক্রল বার উপস্থিত হয় তবে সামগ্রীর প্রস্থ স্ক্রল বারের প্রস্থ দ্বারা হ্রাস পায় (প্রায় 16px - ব্রাউজার, OS, ডিভাইসের উপর নির্ভর করে)। নিম্নলিখিত উদাহরণে এলিমেন্টের প্রস্থ প্রত্যাশার চেয়ে কম হবে:

html<div id="elem">এই এলিমেন্টের একটি স্ক্রল বার আছে।</div>

css#elem {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
  overflow: scroll;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

কোড এক্সিকিউশনের ফলাফল:

javascript114 (ব্রাউজারের উপর নির্ভর করে)

উদাহরণ

যদি এলিমেন্টটি লুকানো থাকে, তাহলে clientWidth সমান হবে 0:

html<div id="elem"></div>

css#elem {
  display: none; /* লুকানো এলিমেন্ট */
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

কোড এক্সিকিউশনের ফলাফল:

javascript0

আরো দেখুন