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 tag renders as emphasized text, displaying the text oblique?

<p>Web development courses: <em>CoursesWeb.net</em></p>

Which CSS property defines the space between the element border and its content?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Click on the method which returns the first element that matches a specified group of selectors.

getElementsByName() querySelector() querySelectorAll()

// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicate the PHP variable that contains data from a form sent with method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}