স্যাট একাডেমী
শিক্ষা নিয়ে বাণিজ্য নয়, আসুন শিক্ষা বাণিজ্যকে "না" বলি।
Facebook Twitter Google LinkedIn
☰ জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
টিউটোরিয়াল
 

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

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

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

width() মেথড নির্বাচিত এলিমেন্টের প্রস্থ সেট করে অথবা রিটার্ন করে।

যখন এই মেথডটি প্রস্থ রিটার্ন করতে ব্যবহার করা হয়, এটি প্রথম মিল্কৃত এলিমেন্টের প্রস্থ রিটার্ন করবে।

যখন এই মেথডটি প্রস্থ(width) সেট করতে ব্যবহার করা হয়, এটি মিল্কৃত সকল এলিমেন্টের প্রস্থ সেট করবে।

নিচের ইমেজের মাধ্যমে বুঝানো হয়েছে যে, এই মেথডে প্যাডিং, বর্ডার এবং মার্জিন অন্তর্ভুক্ত করেনি।

jQuery Dimensions

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

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

প্রস্থ(width) রিটার্ন:

$(selector).width()

প্রস্থ(width) সেট:

$(selector).width(value)

ফাংশন ব্যবহার করে প্রস্থ সেট:

$(selector).width(function(index,currentwidth))

প্যারামিটার ও তাদের ভ্যালু

নিচের টেবিলে width() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
value প্রস্থ সেট করার জন্য আবশ্যক। px, em, pt ইত্যাদির মাধ্যমে প্রস্থ উল্লেখ করে। ডিফল্ট ইউনিট হলো px।
function (index,currentwidth) ঐচ্ছিক। একটি ফাংশন উল্লেখ করে, যা একটি নির্বাচিত এলিমেন্টে নতুন প্রস্থ রিটার্ন করে।
  • index - সেটের মধ্যে একটি এলিমেন্টের ইনডেক্স পজিশন রিটার্ন করে
  • currentwidth - নির্বাচিত এলিমেন্টের বর্তমান প্রস্থ রিটার্ন করে

উদাহরণ

<!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("Width of div: " + $("div").width());
    });
});
</script>
</head>
<body>

<div style="height:80px;width:250px;padding:10px;margin:3px;border:1px solid blue;background-color:green;"></div><br>

<button>div এর width প্রদর্শণ</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").width(500);
    });
    $("#test2").click(function(){
        $("div").width("10em");
    });
    $("#test3").click(function(){
        $("div").width("300pt");
    });
});
</script>
</head>
<body>

<button id="test1">div এলিমেন্টের প্রস্থ 500px সেট করুন</button>
<button id="test2">div এলিমেন্টের প্রস্থ 10em সেট করুন</button>
<button id="test3">div এলিমেন্টের প্রস্থ 300pt সেট করুন</button>

<p><b>নোট:</b> em, pt, ইত্যাদির ক্ষেত্র "" ব্যবহার করুন।</p>

<div style="height:80px;width:250px;border:1px solid blue;background-color:green;"></div><br>

</body>
</html>

ফলাফল

ফাংশন ব্যবহার করে প্রস্থ কমানো

একটি এলিমেন্টের width কমাতে কিভাবে একটি ফাংশন ব্যবহার করা যায়।

উদাহরণ

<!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").width(function(n, c){
        return c - 200;
        });
    });
});
</script>
</head>
<body>

<button>div এলিমেন্টের প্রস্থ 200px হ্রাস করুন</button><br><br>

<div style="height:100px;border:4px solid;"></div>

</body>
</html>

ফলাফল

ডকুমেন্ট এবং উইন্ডো এলিমেন্টের width রিটার্ন

কিভাবে ডকুমেন্ট এবং উইন্ডো এলিমেন্টের বর্তমান width রিটার্ন করা যায়।

উদাহরণ

<!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).width());
        $("#span2").text($(document).width());
    });
});
</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>

ফলাফল

width() দ্বারা রেস্পন্সিভ ডিজাইন

ছোট স্ক্রিনে কিভাবে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা যায়।

উদাহরণ

<!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(){
  $(window).resize(function() {
    if ($(this).width() < 728) {
      $("body").css("background-color", "green");
    } else {
      $("body").css("background-color", "red");
    }
  });
});
</script>
</head>
<body>

<p>background-color বদলানোর জন্য উইন্ডোটি রিসাইজ করুন (স্ক্রিনের width ছোট এবং বড় করুন)।</p>

</body>
</html>

ফলাফল

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

আমাদের টিউটোরিয়াল সমূহ


ক্লায়েন্ট সাইড টিউটোরিয়াল
HTML টিউটোরিয়াল
CSS টিউটোরিয়াল
BootStrap টিউটোরিয়াল
JavaScript টিউটোরিয়াল
jQuery টিউটোরিয়াল
AngualarJs টিউটোরিয়াল
সার্ভার সাইড টিউটোরিয়ায়াল
পিএইচপি টিউটোরিয়াল
এসকিউএল টিউটোরিয়াল ওয়ার্ডপ্রেস টিউটোরিয়াল
প্রোগ্রামিং টিউটোরিয়ায়াল
সি টিউটোরিয়াল
পাইথন টিউটোরিয়াল
অন্যান্য
চাকুরীর প্রশ্ন-উত্তর
ফোরাম
ব্লগ
© স্যাট একাডেমী