জেকুয়েরি innerWidth() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
innerWidth() মেথড প্রথম মিলকৃত এলিমেন্টের অভ্যন্তরীন-প্রস্থ রিটার্ন করে।
নিচের ইমেজ illustrates হিসাবে, এই মেথডে প্যাডিং রয়েছে, কিন্তু বর্ডার এবং মার্জিন নাই।
সম্পর্কিত মেথডগুলো:
- width() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে।
- height() - একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে।
- innerHeight() একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে (প্যাডিংসহ)।
- outerWidth() - একটি এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে (প্যাডিং এবং বর্ডারসহ)।
- outerHeight() একটি এলিমেন্টের উচ্চতা সেট করে অথবা রিটার্ন করে (প্যাডিং এবং বর্ডারসহ)
সিনট্যাক্স ও ব্যাখ্যা
$(selector).innerWidth()
উদাহরণ
<!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 width of div: " + $("div").innerWidth());
});
});
</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 Width প্রদর্শণ</button>
<p>innerWidth() - এলিমেন্টের inner Width রিটার্ন করে (পেডিং সহ)।</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>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ