জেকুয়েরি innerHeight() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
innerHeight() মেথড প্রথম মিলকৃত এলিমেন্টের অভ্যন্তরীন উচ্চতা রিটার্ন করে।
নিচের ইমেজ illustrates হিসাবে, এই পদ্ধতিতে প্যাডিং অন্তর্ভূক্ত থাকে, কিন্তু বর্ডার এবং মার্জিন থাকে না।
সম্পর্কিত মেথডগুলো:
- width() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে।
- height() - একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে।
- innerWidth() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে (প্যাডিংসহ)।
- outerWidth() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে (প্যাডিং এবং বর্ডারসহ)।
- outerHeight() একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে (প্যাডিং এবং বর্ডারসহ)
সিনট্যাক্স ও ব্যাখ্যা
$(selector).innerHeight()
উদাহরণ
<!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("Inner height of div: " + $("div").innerHeight());
});
});
</script>
</head>
<body>
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>
<button>div এর inner height প্রদর্শণ</button>
<p>innerHeight() - এলিমেন্টের inner height রিটার্ন করে (পেডিং সহ)।</p>
</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>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ