জেকুয়েরি css() মেথড
জেকুয়েরি css() মেথড
জেকুয়েরি css() মেথডের মাধ্যমে নির্বাচিত এলিমেন্টের জন্য এক বা একাদিক স্টাইল প্রোপার্টি সেট করে।
একটি সিএসএস প্রোপার্টি রিটার্ন
কোন একটি সিএসএস প্রোপার্টির ভ্যালু রিটার্ন করার জন্য, নিম্নলিখিত সিনট্যাক্স ব্যবহার করুনঃ
css("propertyname");
নিচের উদাহরনে নির্বাচিত(selected) প্রথম এলিমেন্টের ব্যকগ্রাউন্ড কালার রিটার্ন করবেঃ
উদাহরণ
<!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(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<div>
<p style="background-color: #00ff00;">এটি একটি প্যারাগ্রাফ।</p>
</div>
<br>
<button>p এলিমেন্টের ব্যাকগ্রাউন্ড কালার রিটার্ণ করুন!</button>
</body>
</html>
ফলাফল
সিএসএস প্রোপার্টি সেট
নির্বাচিত এলিমেন্টে সিএসএস প্রোপার্টি সেট করার জন্য, নিম্নলিখিত সিনট্যাক্সটি ব্যবহার করুনঃ
css("propertyname","value");
নিচের উদাহরনে নির্বাচিত সকল এলিমেন্টের ব্যকগ্রাউন্ড কালার yellow সেট করবেঃ
উদাহরণ
<!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(){
$("div").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<div style="background: yellow;">
<h2>এটি একটি হেডিং!</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
</div>
<br>
<button>div এর ব্যাকগ্রাউন্ড কালার সেট করুন!</button>
</body>
</html>
ফলাফল
একাধিক সিএসএস প্রোপার্টি সেট
একাধিক সিএসএস প্রোপার্টি সেট করার জন্য, নিম্নলিখিত সিনট্যাক্সটি ব্যবহার করুনঃ
css({
"propertyname" : "value",
"propertyname" : "value",
"propertyname" : "value",
});
নিচের উদাহরনে নির্বাচিত সকল এলিমেন্টের জন্য ব্যকগ্রাউন্ড এবং ফন্টের কালার এবং ফন্টের আকার সেট করা দেখানো হলোঃ
উদাহরণ
<!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(){
$("div").css({
"background-color" : "bisque",
"color" : "red",
"font-size" : "180%",
});
});
});
</script>
</head>
<body>
<div style="background: yellow;">
<h2>এটি একটি হেডিং!</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
</div>
<br>
<button>div এ একাধিক স্টাইল সেট করুন!</button>
</body>
</html>
ফলাফল
জেকুয়েরি সিএসএস রেফারেন্স
জেকুয়েরি সিএসএস মেথডের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি এইচটিএমএল/সিএসএস রেফারেন্স ভিজিট করুন।