জেকুয়েরি css() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
css() মেথড নির্বাচিত আইটেমের এক বা একাদিক স্টাইল প্রোপার্টি সেট করে অথবা রিটার্ন করে।
যখন রিটার্ন প্রোপার্টি ব্যবহার করবো:
প্রথম মিলকৃত এলিমেন্টে এই মেথড নির্দিষ্ট সিএসএস প্রোপাটি ভ্যালু রিটার্ন করে।
যাইহোক, শর্টহ্যান্ড সিএসএস প্রোপার্টি (যেমন background এবং border) সম্পূর্ন সাপোর্ট করে না এবং বিভিন্ন ব্রাউজারে বিভিন্ন ফলাফল দিতে পারে।
যখন রিটার্ন প্রোপার্টি ব্যবহার করবো:
সকল মিলকৃত এলিমেন্টের জন্য এই মেথড নির্দিষ্ট সিএসএস প্রোপার্টি সেট করে।
সিনট্যাক্স ও ব্যাখ্যা
সিএসএস প্রোপার্টি ভ্যালু রিটার্ন করে:
$(selector).css(property)
সিএসএস প্রোপার্টি এবং ভ্যালু সেট:
$(selector).css(property,value)
ফাংশন ব্যবহার করে সিএসএস প্রোপার্টি এবং ভ্যালু সেট:
$(selector).css(property,function(index,currentvalue))
একাদিক প্রোপার্টি এবং ভ্যালু সেট:
$(selector).css({property:value, property:value, ...})
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে css() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
property |
সিএসএস প্রোপার্টির নাম উল্লেখ করে, যেমন "color", "font-weight", ইত্যাদি। |
value |
সিএসএস প্রোপার্টির ভ্যালু উল্লেখ করে, যেমন "red", "bold", ইত্যাদি। |
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(){
$("p").css("color", "green");
});
});
</script>
</head>
<body>
<button>সব p এলিমেন্টে color প্রোপার্টি নির্ধারন করা </button>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি ভিন্ন একটি প্যারাগ্রাফ।</p>
</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($("p").css("color"));
});
});
</script>
</head>
<body>
<button>p এলিমেন্টের সিএসএস color ভ্যালু রিটার্ন</button>
<p style="color:green">এটি একটি প্যারাগ্রাফ।</p>
</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").css("border-width", function(i){
return i + 25;
});
});
});
</script>
</head>
<body>
<button>p এলিমেন্টের border-width প্রোপার্টি পরিবর্তন করুন</button>
<p style="border: 1px solid black;">এটি একটি প্যারগ্রাফ।</p>
</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").css({
"color": "red",
"background-color": "#ffadad",
"font-family": "Arial",
"font-size": "25px",
"padding": "4px"
});
});
});
</script>
</head>
<body>
<button>সকল p এলিমেন্টের জন্য একাধিক সিএসএস প্রোপার্টি সেট করুন</button>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল