জেকুয়েরি attr() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
attr() মেথড নির্বাচিত এলিমেন্টের এট্রিবিউট এবং ভ্যালু সেট করে অথবা রিটার্ন করে.
যখন এই মেথডটি এট্রিবিউট ভ্যালু রিটার্ন করে, এটি প্রথম মিলকৃত এলিমেন্টের ভ্যালু রিটার্ন করে।
যখন এই মেথডটি এট্রিবিউট ভ্যালু সেট করে, তখন এটি এক বা একাদিক এট্রিবিউটের ভ্যালু সকল মিলকৃত এলিমেন্টে জোড়ায় জোড়ায় সেট করে।
সিনট্যাক্স ও ব্যাখ্যা
একটি এট্রিবিউটের ভ্যালু রিটার্ন:
$(selector).attr(attribute)
এট্রিবিউট এবং ভ্যালু সেট:
$(selector).attr(attribute,value)
ফাংশন ব্যবহার করে এট্রিবিউট এবং ভ্যালু সেট:
$(selector).attr(attribute,function(index,currentvalue))
একাধিক এট্রিবিউট এবং ভ্যালু সেট:
$(selector).attr({attribute:value, attribute:value,...})
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে attr() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
attribute |
এট্রিবিউটের নাম উল্লেখ করে |
value |
এট্রিবিউটের ভ্যালু উল্লেখ করে |
function (index,currentvalue) |
একটি ফাংশন উল্লেখ করে যা এট্রিবিউট ভ্যালু সেট করতে রিটার্ন করে
|
উদাহরণ
<!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(){
$("img").attr("width", "500");
});
});
</script>
</head>
<body>
<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>
<button> ইমেজ 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(){
$("button").click(function(){
alert("Image width: " + $("img").attr("width"));
});
});
</script>
</head>
<body>
<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>
<button> ইমেজের 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(){
$("button").click(function(){
$("img").attr("width",function(n, v){
return v - 50;
});
});
});
</script>
</head>
<body>
<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>
<button> ইমেজের width 50px কমিয়ে দেয়</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(){
$("button").click(function(){
$("img").attr({width: "150", height: "100"});
});
});
</script>
</head>
<body>
<img src="../../images/satt.png" alt="satt" width="284" height="213"><br>
<button>ইমেজের width এবং height এট্রিবিউট সেট করুন।</button>
</body>
</html>
ফলাফল