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