HTML DOM clientLeft प्रॉपर्टी किसी एलिमेंट के लेफ्ट बॉर्डर की चौड़ाई को पिक्सेल में वापस करती है। यह एक रीड-ओनली प्रॉपर्टी है। यह प्रॉपर्टी वर्टिकल स्क्रॉलबार की चौड़ाई को शामिल करेगी लेकिन एलिमेंट के लेफ्ट मार्जिन या लेफ्ट पैडिंग को कभी शामिल नहीं करेगी।
सिंटैक्स (Syntax)
clientLeft प्रॉपर्टी का सिंटैक्स:
element.clientLeft
उदाहरण (Example)
HTML DOM clientLeft प्रॉपर्टी का एक उदाहरण:
<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } </style> </head> <body> <p>बॉर्डर लेफ्ट चौड़ाई पिक्सेल में प्राप्त करने के लिए नीचे दिए गए बटन पर क्लिक करें</p> <button onclick="leftWidth()">LEFT WIDTH</button> <div id="styleDiv"></div> <p id="Sample"></p> <script> function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Border left width: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>आउटपुट (Output)
इससे निम्नलिखित आउटपुट प्राप्त होगा:
LEFT WIDTH पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने "styleDiv" आईडी वाला एक डिव बनाया है और इसकी आईडी का उपयोग करके इस पर स्टाइल लागू किया है:
#styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } <div id="styleDiv"></div>फिर हमने एक LEFT WIDTH बटन बनाया जो क्लिक होने पर leftWidth() मेथड को एक्जीक्यूट करेगा:
<button onclick="leftWidth()">LEFT WIDTH</button>
leftWidth() <div> एलिमेंट को getElementById() मेथड का उपयोग करके प्राप्त करता है और इसे वेरिएबल x में असाइन करता है। फिर <div> पर clientLeft प्रॉपर्टी का उपयोग करके इसकी लेफ्ट बॉर्डर चौड़ाई प्राप्त करता है और कुछ टेक्स्ट जोड़कर वेरिएबल txt में असाइन करता है। txt के अंदर का टेक्स्ट फिर पैराग्राफ के अंदर innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित किया जाता है:
function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Border left width: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; }
