HTML DOM ক্লায়েন্ট প্রস্থ সম্পত্তি

HTML DOM clientWidth প্রপার্টি একটি HTML উপাদানের দর্শনযোগ্য প্রস্থ পেতে ব্যবহৃত হয়। এই প্রস্থে প্যাডিং অন্তর্ভুক্ত থাকে তবে যেকোনো সীমানা, স্ক্রলবার এবং মার্জিন বাদ দেয়। উপাদান থেকে বিষয়বস্তু ওভারফ্লো হলেও এটি শুধুমাত্র উপাদানের প্রস্থ ফেরত দেবে।

সিনট্যাক্স

ক্লায়েন্টউইথ প্রপার্টি -

-এর জন্য সিনট্যাক্স নিচে দেওয়া হল

element.clientWidth

উদাহরণ

আসুন আমরা HTML DOM ক্লায়েন্টউইথ প্রপার্টি -

এর একটি উদাহরণ দেখি

<!DOCTYPE html>
<html>
<head>
<style>
#divStyle {
   width: 200px;
   height: 200px;
   padding: 10px;
   margin: 15px;
   border: 5px solid blue;
   background-color: lightgreen;
}
</style>
</head>
<body>
<p>Click the below button to get the widhth of the div</p>
<button onclick="getWidth()">GET WIDTH</button>
<div id="divStyle">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function getWidth() {
      var x = document.getElementById("divStyle");
      var txt = "Width including padding: " + x.clientWidth + "px";
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM ক্লায়েন্ট প্রস্থ সম্পত্তি

GET WIDTH -

-এ ক্লিক করলে

HTML DOM ক্লায়েন্ট প্রস্থ সম্পত্তি

উপরের উদাহরণে -

আমরা "styleDIV" আইডি সহ একটি ডিভি তৈরি করেছি এবং এটির আইডি ব্যবহার করে একটি স্টাইল প্রয়োগ করেছি৷

#divStyle {
   width: 200px;
   height: 200px;
   padding: 10px;
   margin: 15px;
   border: 5px solid blue;
   background-color: lightgreen;
}

div -

<div id="divStyle">
<b>A sample div</b>
</div>

তারপরে আমরা একটি GET WIDTH বোতাম তৈরি করেছি যা getWidth() মেথডটি ক্লিক −

এ এক্সিকিউট করবে।

<button onclick="getWidth()">GET WIDTH</button>

getWidth() getElementById() পদ্ধতি ব্যবহার করে

এলিমেন্ট পায় এবং এটি পরিবর্তনশীল x-এ বরাদ্দ করে। তারপর

-এ ক্লায়েন্টউইথ প্রপার্টি ব্যবহার করে আমরা এর প্রস্থ পাই এবং কিছু টেক্সট যুক্ত করার পর এটি পরিবর্তনশীল txt-এ বরাদ্দ করি। txt-এর ভিতরের টেক্সটটি অনুচ্ছেদের ভিতরের এইচটিএমএল প্রপার্টি ব্যবহার করে প্যারাগ্রাফের ভিতরে প্রদর্শিত হয় এবং এটিতে txt ভেরিয়েবল বরাদ্দ করা হয় −

function getWidth() {
   var x = document.getElementById("divStyle");
   var txt = "Width including padding: " + x.clientWidth + "px";
   document.getElementById("Sample").innerHTML = txt;
}