classList - Working with CSS classes

Examples with classList

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.
Syntax:

element.classList

- If the class attribute is not set or is empty, the element.classList.length returns 0.

classList Methods

The object contained by the classList property has these methods:

add(class1, class2, ..) - adds one or more class names to an element. If the specified class already exist, the class will not be added.
contains(class) - To check if an element contains or not a specified css class. It returns True if the element contains the specified class name; otherwise, False.
item(index) - returns the class name with a specified index number (index starts at 0), or Null if the specified index is out of range.
remove(class1, class2, ..) - removes one or more class names from an element.
replace(oldClass, newClass) - replaces an existing class with a new class.
toggle(class, [true|false]) - When only one argument is passed: Toggle class value, if class exists then remove it and return false, if not, then add it and return true.
The optional second parameter (true or false) forces the class to be added or removed, regardless of whether or not it already existed.
For example:
- Remove a class:
```
element.classList.toggle('classToRemove', false);
```
- Add a class:
```
element.classList.toggle('classToAdd', true);
```

Examples with classList

1. Adds two css classes to a <div>:

var div1 = document.getElementById('div1');
div1.classList.add('cls_1', 'cls_2');

2. Removes a css class from a <div>:

var div1 = document.getElementById('div1');
div1.classList.remove('cls_2');

3. Checks 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. Replaces class 'foo' with 'bar':

var div1 = document.getElementById('div1');
div1.classList.replace('foo', 'bar');

5. If 'visible' is set removes it, otherwise add it:

var div1 = document.getElementById('div1');
div1.classList.toggle('visible');

<<-JavaScript code and PHP -- Define and Use Classes ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4