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