জয়েন লগইন

জাভাস্ক্রিপ্ট ক্লাস লিস্ট

🌈জাভাস্ক্রিপ্ট ক্লাস লিস্ট কি?

📋জাভাস্ক্রিপ্ট ক্লাস লিস্ট হলো ক্লাস নিয়ন্ত্রণ করার পদ্ধতি।

⚒️জাভাস্ক্রিপ্ট ক্লাস লিস্ট ক্লাস নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

জাভাস্ক্রিপ্ট ক্লাস লিস্ট সমূহ

জাভাস্ক্রিপ্ট ক্লাস লিস্ট এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ 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 ক্লাস প্রতিস্থাপন করতে ব্যবহৃত হয়।