چگونه کلاس‌ها را تغییر دهیم

با استفاده از JavaScript بین اضافه کردن و حذف کلاس‌ها در عناصر جابجایی کنید.

با کلیک بر روی دکمه نام کلاس را تغییر دهید!

تغییر کلاس

مرحله اول - اضافه کردن HTML:

در هنگام اضافه کردن نام کلاس به id="myDIV" بین عنصرهای div تغییر دهید (در این مثال از دکمه برای تغییر نام کلاس استفاده می‌کنیم).

<button onclick="myFunction()">آزمایش کنید</button>
<div id="myDIV">
  این یک عنصر DIV است.
</div>

مرحله دوم - اضافه کردن CSS:

یک نام کلاس اضافه کنید تا تغییر دهید:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

مرحله سوم - اضافه کردن JavaScript:

دریافت id="myDIV" عنصر <div>، و در "mystyle" تبدیل بین کلاس‌ها:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

آزمایش کنید

صفحات مرتبط

تدریس:کہیں سے عمل درآمد کردم: کلاس کا اضافہ کریں

تدریس:کہیں سے عمل درآمد کردم: کلاس کو حذف کریں

مراجع:HTML DOM Element classList پرزیر