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:

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');

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
classList - Working with CSS classes

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (44208)
  2. JavaScript Chronometer / Stopwatch (5383)
  3. SHA1 Encrypt data in JavaScript (12940)
  4. Contact page - CoursesWeb (21733)
  5. Tabs effect with CSS (22440)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1278)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1243)
  3. Tabs effect with CSS (1235)
  4. Contact page - CoursesWeb (1233)
  5. Insert, Select and Update NULL value in MySQL (730)