HTML DOM क्लाइंटविड्थ संपत्ति का उपयोग 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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
GET WIDTH पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने "styleDIV" आईडी के साथ एक डिव बनाया है और इसकी आईडी का उपयोग करके उस पर एक शैली लागू की है।
#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() getElementById() विधि का उपयोग करके
तत्व प्राप्त करता है और इसे वेरिएबल x को असाइन करता है। फिर
पर क्लाइंटविड्थ प्रॉपर्टी का उपयोग करके हमें इसकी चौड़ाई मिलती है और कुछ टेक्स्ट जोड़ने के बाद इसे वेरिएबल txt में असाइन किया जाता है। txt के अंदर के टेक्स्ट को पैराग्राफ में इनर HTML प्रॉपर्टी का उपयोग करके पैराग्राफ के अंदर प्रदर्शित किया जाता है और इसे txt वेरिएबल असाइन किया जाता है -
function getWidth() {
var x = document.getElementById("divStyle");
var txt = "Width including padding: " + x.clientWidth + "px";
document.getElementById("Sample").innerHTML = txt;
}