HTML DOM clientWidth প্রপার্টি

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

সিনট্যাক্স

clientWidth প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো -

element.clientWidth

উদাহরণ

HTML DOM clientWidth প্রপার্টির একটি উদাহরণ দেখি -

<!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>নিচের বাটনে ক্লিক করুন 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>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

GET WIDTH-এ ক্লিক করলে -

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

আমরা "divStyle" আইডি সহ একটি div তৈরি করেছি এবং এর আইডি ব্যবহার করে এতে স্টাইল অ্যাপ্লাই করেছি।

#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() মেথড ব্যবহার করে <div> এলিমেন্টটি পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। তারপর <div>-এ clientWidth প্রপার্টি ব্যবহার করে এর প্রস্থ পেয়ে কিছু টেক্সট অ্যাপেন্ড করে ভেরিয়েবল txt-এ অ্যাসাইন করে। txt ভেরিয়েবলের টেক্সটটি প্যারাগ্রাফের innerHTML প্রপার্টি ব্যবহার করে txt ভেরিয়েবল অ্যাসাইন করে দেখানো হয়েছে -

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