HTML DOM clientWidth प्रॉपर्टी

HTML DOM clientWidth प्रॉपर्टी का उपयोग HTML एलिमेंट की व्यूएबल चौड़ाई (viewable width) प्राप्त करने के लिए किया जाता है। इस चौड़ाई में पैडिंग शामिल होती है लेकिन बॉर्डर, स्क्रॉलबार और मार्जिन शामिल नहीं होते। यह केवल एलिमेंट की चौड़ाई वापस करेगा भले ही कंटेंट एलिमेंट से ओवरफ्लो हो रहा हो।

सिंटैक्स (Syntax)

clientWidth प्रॉपर्टी का सिंटैक्स:

element.clientWidth

उदाहरण (Example)

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>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM clientWidth प्रॉपर्टी

GET WIDTH पर क्लिक करने पर:

HTML DOM clientWidth प्रॉपर्टी

उपरोक्त उदाहरण में:

हमने "divStyle" आईडी वाला एक डिव बनाया है और इसकी आईडी का उपयोग करके इस पर स्टाइल लागू किया है:

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

डिव:

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

फिर हमने एक GET WIDTH बटन बनाया जो क्लिक होने पर getWidth() मेथड को एक्जीक्यूट करेगा:

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

getWidth() <div> एलिमेंट को getElementById() मेथड का उपयोग करके प्राप्त करता है और इसे वेरिएबल x में असाइन करता है। फिर <div> पर clientWidth प्रॉपर्टी का उपयोग करके इसकी चौड़ाई प्राप्त करता है और कुछ टेक्स्ट जोड़कर वेरिएबल txt में असाइन करता है। txt के अंदर का टेक्स्ट फिर पैराग्राफ के अंदर innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित किया जाता है:

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