জেকুয়েরি height() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
height() মেথড নির্বাচিত এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে।
যখন এই মেথড উচ্চতা রিটার্ন করতে ব্যবহার করা হয়, এটি প্রথম মিলকৃত এলিমেন্টের উচ্চতা রিটার্ন করে।
যখন এই মেথডটি উচ্চতা সেট করতে ব্যবহার করা হয়, এটি সকল মিলকৃত এলিমেন্টের উচ্চতা সেট করে।
নিচের ইমেজ illustrates হিসাবে, এই পদ্ধতি padding, border বা margin অন্তর্ভুক্ত করে না।
সম্পর্কিত মেথডসমূহ:
- width() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে।
- innerWidth() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে (প্যাডিং সহ)
- innerHeight() একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে (প্যাডিং সহ)
- outerWidth() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে ( প্যাডিং এবং বর্ডারসহ)
- outerHeight() - একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে ( প্যাডিং এবং বর্ডারসহ)
সিনট্যাক্স ও ব্যাখ্যা
উচ্চতা রিটার্ন:
$(selector).height()
উচ্চতা সেট:
$(selector).height(value)
ফাংশন ব্যবহার করে উচ্চতা সেট সেট:
$(selector).height(function(index,currentheight))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে height() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
value |
উচ্চতা সেট করার জন্য আবশ্যক। px, em, pt, ইত্যাদি ইউনিটের মাধ্যমে উচ্চতা উল্লেখ করে px, em, pt, ইত্যাদি ডিফল্ট ইউনিট হচ্ছে px। |
function (index,currentheight) |
ঐচ্ছিক। একটি ফাংশন উল্লেখ করে যা নির্বাচিত এলিমেন্টের একটি নতুন উচ্চতা রিটার্ন করে।
|
উদাহরণ
<!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(){
alert("div এর উচ্চতা হলো: " + $("div").height());
});
});
</script>
</head>
<body>
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid green;background-color:lightblue;"></div><br>
<button>div এলিমেন্টের উচ্চতা প্রদর্শন করুন</button>
</body>
</html>
ফলাফল
উদাহরণ
একটি এলিমেন্টের উচ্চতা সেট
ভিন্ন ইউনিট ব্যবহার করে কিভাবে একটি এলিমেন্টের উচ্চতা সেট করা যায়।
উদাহরণ
<!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(){
$("#test1").click(function(){
$("div").height(500);
});
$("#test2").click(function(){
$("div").height("10em");
});
$("#test3").click(function(){
$("div").height("200pt");
});
});
</script>
</head>
<body>
<button id="test1"> ডিভ(div)-এর উচ্চতা 500px সেট </button>
<button id="test2"> ডিভ(div)-এর উচ্চতা 10em সেট</button>
<button id="test3">ডিভ(div)-এর উচ্চতা 200pt সেট </button>
<p><b>নোটঃ</b> em, pt ইত্যাদির জন্য ব্যবহার করুন</p>
<div style="height:100px;border:1px solid blue;background-color:lightblue;"></div><br>
</body>
</html>
ফলাফল
একটি ফাংশন ব্যবহার করে উচ্চতা বাড়ানো
একটি ফাংশন ব্যবহার করে কিভাবে উচ্চতা বাড়ানো যায়।
উদাহরণ
<!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(){
$("div").height(function(n,c){
return c+200;
});
});
});
</script>
</head>
<body>
<button> div উচ্চতা 200 px এ বৃদ্ধি করুন</button><br><br>
<div style="height:100px;border:4px solid;"></div>
</body>
</html>
ফলাফল
ডকুমেন্ট এবং উইন্ডো এলিমেন্টের উচ্চতা রিটার্ন
কিভাবে একটি ডকুমেন্ট এবং উইন্ডো এলিমেন্টের বর্তমান উচ্চতা রিটার্ন করা যায়।
উদাহরণ
<!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(){
$("#span1").text($(window).height());
$("#span2").text($(document).height());
});
});
</script>
</head>
<body>
<p>এই উইন্ডোটির উচ্চতা হলো <span id="span1">...</span> px।</p>
<p>এই ডকুমেন্টটির উচ্চতা হলো <span id="span2">...</span> px।</p>
<button>উইন্ডো এবং ডকুমেন্ট এলিমেন্টের উচ্চতা রিটার্ন করুন</button>
</body>
</html>
ফলাফল
সম্পর্কিত মেথডের মাত্রা প্রদর্শন করে
কিভাবে width(), height(), innerHeight(), innerWidth(), outerWidth() এবং outerHeight() ব্যবহার করা যায়।
উদাহরণ
<!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 txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";
txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>" + "</br>";
txt += "Height of div: " + $("#div1").height() + "</br>";
txt += "Inner height of div: " + $("#div1").innerHeight() + "</br>";
txt += "Outer height of div: " + $("#div1").outerHeight() + "</br>";
txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true) + "</br>";
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:180px;width:300px;padding:10px;margin:4px;border:2px solid blue;background-color:lightblue;"></div>
<br>
<button>div এর dimensions প্রদর্শণ</button>
<p>width() - এলিমেন্টের width রিটার্ন করে।</p>
<p>innerWidth() - এলিমেন্টের width রিটার্ন করে (পেডিং সহ)।</p>
<p>outerWidth() - এলিমেন্টের width রিটার্ন করে (পেডিং এবং বর্ডার সহ)।</p>
<p>outerWidth(true) - এলিমেন্টের width রিটার্ন করে (পেডিং, বর্ডার এবং মার্জিন সহ)।</p>
<hr>
<p>height() - এলিমেন্টের height রিটার্ন করে।</p>
<p>innerHeight() - এলিমেন্টের height রিটার্ন করে (পেডিং সহ)।</p>
<p>outerHeight() - এলিমেন্টের height রিটার্ন করে (পেডিং এবং বর্ডার সহ)।</p>
<p>outerHeight(true) - এলিমেন্টের height রিটার্ন করে (পেডিং, বর্ডার এবং মার্জিন সহ)।</p>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ