জেকুয়েরি addClass() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
addClass() মেথড নির্বাচিত এলিমেন্টে এক বা তার অধিক ক্লাস যুক্ত করে।
এই মেথডটি বিদ্যমান ক্লাস এট্রিবিউট মুছে ফেলে না, এটি শুধুমাত্র ক্লাস এট্রিবিউটের মধ্যে এক বা একাধিক ক্লাসের নাম যুক্ত করে।
পরামর্শঃ একাধিক ক্লাস যুক্ত করার জন্য, স্পেস দিয়ে ক্লাসের নাম আলাদা করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).addClass(classname,function(index,currentclass))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে addClass() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
classname |
আবশ্যক। এক বা একাধিক যে ক্লাসগুলো যুক্ত করা হবে তা নির্দেশ করে। |
function (index,currentclass) |
ঐচ্ছিক। একটি ফাংশন নির্দিষ্ট করে যা এক বা একাধিক ক্লাসের যুক্ত করা নাম পুনরাবৃত্তি
করে।
|
উদাহরণ
<!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(){
$("p:last").addClass("test");
});
});
</script>
<style>
.test {
color: green;
}
</style>
</head>
<body>
<h3>এটি একটি শিরোনাম।</h3>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<button>প্রথম p এলিমেন্টে ক্লাসের নাম যোগ করুন </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(){
$("p:last").addClass("test1 test2");
});
});
</script>
<style>
.test1 {
color: blue;
}
.test2 {
font-size: 30px;
}
</style>
</head>
<body>
<h3>এটি একটি হেডার</h3>
<p>এটি একটি অনুচ্ছেদ</p>
<p>এটি অন্য একটি অনুচ্ছেদ।</p>
<button>প্রথম p এলিমেন্টে দুইটি ক্লাস যুক্ত করুন।</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(){
$("p").addClass(function(a){
return "test_" + a;
});
});
});
</script>
<style>
.test_0 {
color: blue;
}
.test_2 {
font-size: 30px;
}
</style>
</head>
<body>
<h3>এটি একটি হেডিং</h3>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<button>p এলিমেন্টে ক্লাস যুক্ত করুন</button>
</body>
</html>
ফলাফল
একটি এলিমেন্টের ক্লাসের নাম পরিবর্তন করা
একটি ক্লাস মুছে নতুন একটি ক্লাস যুক্ত করতে কিভাবে addClass() এবং removeClass() ব্যবহার করা যায়।
উদাহরণ
<!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(){
$("p:last").removeClass("test").addClass("main");
});
});
</script>
<style>
.test {
color: green;
}
.main {
font-size: 30px;
}
</style>
</head>
<body>
<h3>এটি হেডিং</h3>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="test">এটিও প্যারাগ্রাফ।</p>
<button>প্রথম p এলিমেন্টের ক্লাস নাম পরিবর্তন করার জন্য এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল