জেকুয়্যেরি (jQuery) – গেট ও সেট সিএসএস ক্লাসেস
মো: আসাদুজ্জামান
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)
JQuery সঙ্গে, এলিমেন্টের সিএসএস ম্যানিপুলেট সহজ।
jQuery ম্যানিপুলেটিং সিএসএস
jQuery এর CSS ম্যানিপুলেশন জন্য বিভিন্ন পদ্ধতি আছে। আমরা নিম্নলিখিত পদ্ধতি পর্যবেক্ষণ করবো:
- addClass () - নির্বাচিত এলিমেন্ট এক বা একাধিক ক্লাস যুক্ত করে
- removeClass () - নির্বাচিত এলিমেন্ট থেকে এক বা একাধিক ক্লাস মুছে ফেলে
- toggleClass () - নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে
- css()- সেটস্ অথবা স্টাইল এট্রিবিউট ফেরৎ করে
উদাহরণ স্টাইলশীট
নিম্নলিখিত স্টাইল এই পেজে সব উদাহরণ জন্য ব্যবহার করা হবে:
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
jQuery এর addClass () পদ্ধতি
নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে এ কিভাবে ক্লাস এট্রিবিউট যোগ করা হয় তা দেখানো হয়েছে। ক্লাস যোগ করার সময় অবশ্যই আপনি, একাধিক এলিমেন্ট নির্বাচন করতে পারেন:
উদাহরণ:
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
ফলাফল : addClass ()
এছাড়াও আপনি addClass () মেথড এর মধ্যে একাধিক ক্লাস নির্দিষ্ট করতে পারেন:
উদাহরণ:
$("button").click(function(){
$("#div1").addClass("important blue");
});
ফলাফল : একাধিক ক্লাস
jQuery এর removeClass () পদ্ধতি
নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে থেকে কিভাবে ক্লাস এট্রিবিউট অপসারণ করা হয় তা দেখানো হয়েছে।
উদাহরণ:
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
ফলাফল : removeClass ()
jQuery এর toggleClass () পদ্ধতি
নিম্নলিখিত উদাহরণে দেখানো হয়েছে কিভাবে jQuery toggleClass () মেথড ব্যবহার করা হয়। এ পদ্ধতি নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে:
উদাহরণ:
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
ফলাফল : toggleClass ()
jQuery এর css() পদ্ধতি
JQuery এর css()মেথড পরবর্তী অধ্যায়ে ব্যাখ্যা করা হবে।
jQuery এর CSS রেফারেন্স
সমস্ত jQuery সিএসএস পদ্ধতির জন্য, আমাদের jQuery এর HTML / CSS এর রেফারেন্স এ যান।
