জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি innerWidth() মেথড


« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ


সংজ্ঞা এবং ব্যবহার

innerWidth() মেথড প্রথম মিলকৃত এলিমেন্টের অভ্যন্তরীন-প্রস্থ রিটার্ন করে।

নিচের ইমেজ illustrates হিসাবে, এই মেথডে প্যাডিং রয়েছে, কিন্তু বর্ডার এবং মার্জিন নাই।

jQuery Dimensions


সম্পর্কিত মেথডগুলো:


সিনট্যাক্স ও ব্যাখ্যা

$(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>

ফলাফল




« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ