classList is a JavaScript property that can be used to work with CSS classes on HTML elements, useful to add, remove, replace and toggle CSS classes on an element. It contains an object list of the class attribute.
- If the class attribute was not set or is empty, the element.classList.length returns 0.

classList Methods

The object contained by the classList property has these methods:

classList Examples

1. Add two css classes to a <div>:
var div1 = document.getElementById('div1');
div1.classList.add('cls_1', 'cls_2');
2. Remove a css class from a <div>:
var div1 = document.getElementById('div1');
3. Check if a <div> contains or not a specified css class:
var div1 = document.getElementById('div1');
if(div1.classList.contains('cls_1')) alert('.cls_1 in #div1');
else alert('.cls_1 not in #div1');
4. Replace class 'foo' with 'bar':
var div1 = document.getElementById('div1');
div1.classList.replace('foo', 'bar');
5. If 'visible' is set remove it, otherwise add it:
var div1 = document.getElementById('div1');

Daily Test with Code Example

Which tag is used in <table> to create table header cell?
<thead> <th> <td>
  <th>Title 1</th>
  <th>Title 2</th>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){"");
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
classList - Working with CSS classes

Last accessed pages

  1. RegExp - Regular Expressions in ActionScript (2826)
  2. Execute JavaScript scripts loaded via AJAX (3884)
  3. PHP PDO - Select query, fetch (20292)
  4. Register and show online users and visitors (22343)
  5. dompdf (2219)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (439)
  2. Register and show online users and visitors (394)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (383)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (297)
  5. Insert, Select and Update NULL value in MySQL (292)