افزودن یک کلاس (Class) به یک عنصر (Element)، در صورت نداشتن آن کلاس (Class) و حذف کلاس (Class) از عنصر (Element)، در صورت داشتن آن (تغییر داشتن و نداشتن کلاس به صورت متناوب)، با هر بار اجرای کد، با روش classList.toggle ، در JavaScript
با استفاده از روش
classList.toggle در JavaScript ، می توانیم تعیین کنیم بر اساس اینکه یک عنصر (Element) دارای یک کلاس (Class) خاص می باشد یا نه، آن کلاس (Class) خاص به عنصر (Element) مورد نظر افزوده شده و یا اینکه از آن حذف شود.
یعنی با اجرای روش
classList.toggle ، اگر عنصر (Element) دارای کلاس (Class) مورد نظر نباشد، آنگاه آن کلاس (Class) به عنصر (Element) اضافه شود، اما اگر عنصر (Element) دارای آن کلاس (Class) مورد نظر باشد، آن کلاس (Class) از عنصر (Element) حذف می شود.
بنابراین با اجراهای چندین باره روش
classList.toggle ، می توانیم کلاس (Class) مورد نظر را متناوبا به عنصر (Element) اضافه نموده و از عنصر (Element) حذف کنیم.
به مثال زیر توجه کنید:
با هر بار کلیک بر روی دکمه (Button)، روش
classList.toggle اجرا می شود و متناوبا کلاس
My_Class را برای عنصر
p موجود در صفحه، اضافه و حذف می کند. کلاس
My_Class ، رنگ پس زمینه عنصر
p را تغییر می دهد :
نتیجه :
با هر بار کلیک بر روی دکمه (Button)، روش
classList.toggle اجرا می شود و متناوبا کلاس
My_Class_2 را برای عنصر
p موجود در صفحه، اضافه و حذف می کند. کلاس
My_Class_2 ، رنگ پس زمینه عنصر
p را تغییر می دهد :
نتیجه :
