জাভাস্ক্রিপ্ট ক্লাস লিস্ট
🌈জাভাস্ক্রিপ্ট ক্লাস লিস্ট কি?
📋জাভাস্ক্রিপ্ট ক্লাস লিস্ট হলো ক্লাস নিয়ন্ত্রণ করার পদ্ধতি।
⚒️জাভাস্ক্রিপ্ট ক্লাস লিস্ট ক্লাস নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
জাভাস্ক্রিপ্ট ক্লাস লিস্ট সমূহ
জাভাস্ক্রিপ্ট ক্লাস লিস্ট এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ classList - ক্লাস নিয়ন্ত্রণ করা
- ➡️ add - ক্লাস যোগ করা
- ➡️ remove - ক্লাস ডিলিট করা
- ➡️ toggle - ক্লাস টগল করা
- ➡️ contains - ক্লাস অন্তর্ভুক্ত কিনা যাচাই করা
- ➡️ replace - ক্লাস প্রতিস্থাপন করা
classList - ক্লাস নিয়ন্ত্রণ করার উদাহরণ।
javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
background: tomato;
}
</style>
</head>
<body>
<button onclick="execute()">ফলাফল</button>
<div id="box">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<script>
function execute() {
box.classList.add("tomato");
}
</script>
</body>
</html>
add - ক্লাস যোগ করার উদাহরণ।
javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
background: tomato;
}
</style>
</head>
<body>
<button onclick="execute()">ফলাফল</button>
<div id="box">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<script>
function execute() {
box.classList.add("tomato");
}
</script>
</body>
</html>
remove - ক্লাস ডিলিট করার উদাহরণ।
javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
background: tomato;
}
</style>
</head>
<body>
<button onclick="execute()">ফলাফল</button>
<div id="box" class="tomato">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<script>
function execute() {
box.classList.remove("tomato");
}
</script>
</body>
</html>
toggle - ক্লাস টগল করার উদাহরণ।
javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
background: tomato;
}
</style>
</head>
<body>
<button onclick="execute()">ফলাফল</button>
<div id="box" class="tomato">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<script>
function execute() {
box.classList.toggle("tomato");
}
</script>
</body>
</html>
contains - ক্লাস অন্তর্ভুক্ত কিনা যাচাই করার উদাহরণ।
javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
background: tomato;
}
</style>
</head>
<body>
<button onclick="execute()">ফলাফল</button>
<div id="box" class="tomato">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<p id="result"></p>
<script>
function execute() {
alert(box.classList.contains("tomato")) ;
}
</script>
</body>
</html>
replace - ক্লাস প্রতিস্থাপন করার উদাহরণ।
javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
background: tomato;
}
.orange {
background: orange;
}
</style>
</head>
<body>
<button onclick="execute()">ফলাফল</button>
<div id="box" class="tomato">
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<script>
function execute() {
box.classList.replace("tomato", "orange");
}
</script>
</body>
</html>
জাভাস্ক্রিপ্ট ক্লাস লিস্ট সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| classList | ক্লাস নিয়ন্ত্রণ করতে ব্যবহৃত হয়। |
| add | ক্লাস যোগ করতে ব্যবহৃত হয়। |
| remove | ক্লাস ডিলিট করতে ব্যবহৃত হয়। |
| toggle | ক্লাস টগল করতে ব্যবহৃত হয়। |
| contains | ক্লাস অন্তর্ভুক্ত কিনা যাচাই করতে ব্যবহৃত হয়। |
| replace | ক্লাস প্রতিস্থাপন করতে ব্যবহৃত হয়। |