জেকুয়েরি position() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
position() মেথড প্রথম মিলকৃত এলিমেন্টের অবস্থান রিটার্ন করে.
এই মেথড একটি অবজেক্টের সাথে দুটি প্রোপার্টি রিটার্ন করে; পিক্সেলে top এবং left অবস্থান রিটার্ন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).position()
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").position();
alert("Top position: " + x.top + "px" + " Left position: " + x.left + "px");
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>p এলিমেন্টের top এবং left অবস্থান রিটার্ন</button>
</body>
</html>
ফলাফল
উদাহরণ
এলিমেন্টের সাপেক্ষে এলিমেন্টের অবস্থান রিটার্ন
কিভাবে <div> এলিমেন্টের ভিতরে একটি <p> এলিমেন্টের অবস্থান পাওয়া যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
x = $("p").position();
$("#span1").text(x.top);
$("#span2").text(x.left);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;padding:80px;margin:30px;">
<p>এই প্যারাগ্রাফের অবস্থান (parent এলিমেন্টের সাথে সম্পর্কযুক্ত) <span id="span1">x</span> উপরে এবং <span id="span2">x</span> বামে।</p>
<button>অবস্থান দেখুন</button>
</div>
</body>
</html>
ফলাফল