জেকুয়েরি সিএসএস ক্লাস Get এবং Set
জেকুয়েরির সাহায্যে খুব সহজে কোনো একটি এলিমেন্টের সিএসএস ম্যানিপুলেট করা যায়।
জেকুয়েরি সিএসএস ম্যানিপুলেটিং
সিএসএস ম্যানিপুলেট করার জন্য জেকুয়েরির কয়েকটি মেথড রয়েছে। আমরা নিম্নলিখিত মেথড গুলো লক্ষ্য করবোঃ
addClass()- নির্বাচিত এলিমেন্টে এক বা তার অধিক ক্লাস যুক্ত করে।removeClass()- নির্বাচিত এলিমেন্ট থেকে এক বা তার অধিক ক্লাস রিমোভ করে।toggleClass()- নির্বাচিত এলিমেন্ট থেকে ক্লাস যুক্ত করা/রিমোভ করার মধ্যে টোগল করে।css()- নির্বাচিত এলিমেন্টে স্টাইল এট্রিবিউট সেট অথবা রিটার্ন করে।
উদাহরন স্টাইলশীট
এই পেজের সকল উদাহরণের ক্ষেত্রে নিচের স্টাইলশীটটি ব্যবহার করা হবেঃ
.satt-red {
color: red;
}
.satt-green {
color: green;
}
.satt-bold {
font-weight: bold;
}
জেকুয়েরি addClass() মেথড
জেকুয়েরি addClass() মেথডের মাধ্যমে নির্বাচিত এলিমেন্টে class এট্রিবিউট যুক্ত করা যায়।
নিচের উদাহরনে দেখানো হয়েছে, কিভাবে বিভিন্ন এলিমেন্টে class এট্রিবিউট যুক্ত করা যায়। ক্লাস যুক্ত করার ক্ষেত্রে আপনি একাধিক এলিমেন্টকে সিলেক্ট করতে পারবেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, #para1, .para2").addClass("satt-green");
$("#para3").addClass("satt-red");
});
});
</script>
<style>
.satt-red {
color: red;
}
.satt-green {
color: green;
}
</style>
</head>
<body>
<h1>এটি একটি হেডিং।</h1>
<p id="para1">এটি একটি প্যারাগ্রাফ।</p>
<p class="para2">এটিও একটি প্যারাগ্রাফ।</p>
<p id="para3">এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<br>
<button>এলিমেন্টে ক্লাস যুক্ত করুন!</button>
</body>
</html>
ফলাফল
আপনি চাইলে addClass() মেথডে একাধিক ক্লাস ব্যবহার করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").addClass("satt-green satt-big");
});
});
</script>
.satt-green {
color: green;
}
.satt-big {
font-size: 30px;
}
</style>
</head>
<body>
<div>
<h3>এটি একটি হেডিং।</h3>
<p>এটি একটি প্যারাগ্রাফ।</p>
</div>
<br>
<button>একাধিক ক্লাস যুক্ত করুন!</button>
</body>
</html>
ফলাফল
জেকুয়েরি removeClass() মেথড
জেকুয়েরি removeClass() মেথডের মাধ্যমে নির্বাচিত এলিমেন্ট থেকে class এট্রিবিউট রিমোভ করা যায়।
নিচের উদাহরনে দেখানো হয়েছে, কিভাবে বিভিন্ন এলিমেন্ট থেকে একটি নির্দিষ্ট class এট্রিবিউট রিমোভ করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
});
</script>
<style>
.satt-red {
color: red;
}
</style>
</head>
<body>
<h1 class="satt-red">এটি হেডিং ১!</h1>
<h2 class="satt-red">এটি হেডিং ২!</h2>
<p class="satt-red">এটি একটি প্যারাগ্রাফ।</p>
<p class="satt-red">এটি অন্য একটি প্যারাগ্রাফ।</p>
<br>
<button>এলিমেন্ট থেকে class রিমুভ করুন!</button>
</body>
</html>
ফলাফল
জেকুয়েরি toggleClass() মেথড
জেকুয়েরি toggleClass() মেথড নির্বাচিত এলিমেন্টে addClass() এবং removeClass() মেথডের মধ্যে টোগল করে।
নিচের উদাহরনে দেখানো হয়েছে, কিভাবে জেকুয়েরি toggleClass() মেথড ব্যবহার করা যায়। এই মেথডটি ক্লাস যুক্ত করা/ক্লাস রিমোভ করার মধ্যে টোগল করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("satt-red");
});
});
</script>
<style>
.satt-red {
color: red;
}
</style>
</head>
<body>
<h1>এটি হেডিং ১!</h1>
<h2>এটি হেডিং ২!</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<br>
<button>toggleClass()</button>
</body>
</html>
ফলাফল
জেকুয়েরি css() মেথড
জেকুয়েরি css() মেথড সম্পর্কে পরবর্তী অধ্যায়ে আলোচনা করা হয়েছে।
জেকুয়েরি সিএসএস রেফারেন্স
জেকুয়েরি সিএসএস মেথডের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি এইচটিএমএল/সিএসএস রেফারেন্স পেজে ভিজিট করুন।