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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
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 -
<div id="styleDiv"> <b>A sample div</b> </div>
তারপরে আমরা TOP WIDTH একটি বোতাম তৈরি করেছি যা ক্লিক −
-এ topWidth() পদ্ধতিটি কার্যকর করবে।<button>TOP WIDTH</button>
topWidth() getElementById() পদ্ধতি ব্যবহার করে
উপাদানটি পায় এবং এটি পরিবর্তনশীল x-এ বরাদ্দ করে। তারপর
-এ ক্লায়েন্টটপ প্রপার্টি ব্যবহার করে আমরা এর টপ বর্ডার প্রস্থ পাই পিক্সেলে এবং কিছু টেক্সট যুক্ত করার পর ভ্যারিয়েবল txt-এ বরাদ্দ করি। txt-এর ভিতরের টেক্সট তারপর প্যারাগ্রাফের ভিতরে id "Sample" সহ innerHTML প্রপার্টি ব্যবহার করে প্রদর্শিত হয় এবং এটিতে txt ভেরিয়েবল বরাদ্দ করা হয় -
function topWidth() {
var x = document.getElementById("styleDiv");
var txt = "Border top width: " + x.clientTop + "px";
document.getElementById("Sample").innerHTML = txt;
} 