Javascript Course


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 type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
classList - Working with CSS classes

Last accessed pages

  1. AJAX with POST and PHP (17420)
  2. SHA256 Encrypt hash in JavaScript (24453)
  3. Get and Modify content of an Iframe (28323)
  4. Read Excel file data in PHP - PhpExcelReader (90422)
  5. Moving html element to a random direction (3275)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (161)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (98)
  3. SHA1 Encrypt data in JavaScript (77)
  4. Read Excel file data in PHP - PhpExcelReader (73)
  5. Create simple Website with PHP (69)