HTML DOM क्लाइंटटॉप प्रॉपर्टी किसी तत्व की ऊपरी सीमा की चौड़ाई पिक्सेल में लौटाती है। यह केवल पढ़ने के लिए संपत्ति है। किसी तत्व के शीर्ष मार्जिन या शीर्ष पैडिंग को इस संपत्ति में शामिल नहीं किया जाता है।
सिंटैक्स
क्लाइंटटॉप प्रॉपर्टी के लिए सिंटैक्स निम्नलिखित है -
element.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>Click the below button to get the div top border width in pixels </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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
शीर्ष चौड़ाई पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने "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 जो क्लिक करने पर टॉपविड्थ () विधि निष्पादित करेगा -
<button>TOP WIDTH</button>
टॉपविड्थ() getElementById() विधि का उपयोग करके
तत्व प्राप्त करता है और इसे चर x को असाइन करता है। फिर
पर क्लाइंटटॉप प्रॉपर्टी का उपयोग करके हमें इसकी शीर्ष सीमा चौड़ाई पिक्सेल में मिलती है और कुछ टेक्स्ट जोड़ने के बाद इसे वेरिएबल txt में असाइन किया जाता है। txt के अंदर का टेक्स्ट फिर पैराग्राफ के अंदर "नमूना" आईडी के साथ इनर HTML प्रॉपर्टी का उपयोग करके और इसे txt वैरिएबल असाइन करके प्रदर्शित किया जाता है -
function topWidth() {
var x = document.getElementById("styleDiv");
var txt = "Border top width: " + x.clientTop + "px";
document.getElementById("Sample").innerHTML = txt;
}