Javascript Course

The function presented in this page can be used to delete and add a css class with JavaScript to multiple HTML elements.
- The function has 3 parameters, receives an Array with the IDs of HTML elements from which will delete the class, another Array with the IDs of HTML elements to which will add the class, and the class value.
Here is the function, called delAddClass().
// delete class from IDs in "dlcls" (array with IDs), add class to IDs in "adcls" (array with IDs)
// "cls" contains the class
function delAddClass(dlcls, adcls, cls) {
 // from: https://coursesweb.net/javascript/
  // get number of elements in array parameters
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // traverse each array, delete "class" of "dlcls", add class to "adcls"
  for(var i=0; i<nr_dlcls; i++) {
    if(document.getElementById(dlcls[i])) document.getElementById(dlcls[i]).className = '';
  }
  for(var i=0; i<nr_adcls; i++) {
    if(document.getElementById(adcls[i])) document.getElementById(adcls[i]).className = cls;
  }
}
- Example. Two buttons that call the delAddClass() function, setting /changing CSS class of some DIVs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example delAddClass</title>
<style type="text/css">
#divs {
 position: relative;
 width: 314px;
 margin: 5px auto;
 border: 1px solid #bbbbbb;
 padding: 2px;
 text-align: center;
}
#divs div {
 width: 100px;
 height: 100px;
 margin: 1px 2px;
 float: left;
 background: #ebbbfb;
 font-size: 2em;
}
#divs br { clear: left; }
#divs .cls1 { background: blue; }
#divs .cls2 { background: #00da01; }
</style>
</head>
<body>

<div id="divs">
 <button id="btn1">Add cls1</button>
 <button id="btn2">Add cls2</button>
 <br/><br/>
 <div id="dv1">1</div>
 <div id="dv2">2</div>
 <div id="dv3">3</div>
 <br/>
 <div id="dv4">4</div>
 <div id="dv5">5</div>
 <div id="dv6">6</div>
 <br/>
</div>

<script type="text/javascript"><!--
// delete class from IDs in "dlcls" (array with IDs), add class to IDs in "adcls" (array with IDs)
// "cls" contains the class
function delAddClass(dlcls, adcls, cls) {
 // from: https://coursesweb.net/javascript/
  // get number of elements in array parameters
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // traverse each array, delete "class" of "dlcls", add class to "adcls"
  for(var i=0; i<nr_dlcls; i++) {
    if(document.getElementById(dlcls[i])) document.getElementById(dlcls[i]).className = '';
  }
  for(var i=0; i<nr_adcls; i++) {
    if(document.getElementById(adcls[i])) document.getElementById(adcls[i]).className = cls;
  }
}

// define arrays with IDs
var ids1 = ['dv1', 'dv3', 'dv5'];
var ids2 = ['dv2', 'dv4', 'dv6'];

// register onclick event for #btn1, btn2 that call delAddClass()
document.getElementById('btn1').onclick = function(){ delAddClass(ids2, ids1, 'cls1'); }
document.getElementById('btn2').onclick = function(){ delAddClass(ids1, ids2, 'cls2'); }
//-->
</script>

</body>
</html>
Demo (click the buttons):


1
2
3

4
5
6


- This delAddClass() function can also be used only for deleting, or adding css class, by passing an empty array to argument.
delAddClass( [ ], ids2, 'cls1');     // just add class, not deletes
delAddClass( ids2, [ ], 'cls1');     // just delete class, not adds

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Delete and Add CSS class

Last accessed pages

  1. Multiple Select Dropdown List with JavaScript (10293)
  2. Get Duration of Audio /Video file before Upload (9570)
  3. PHP PDO - Select query, fetch (23905)
  4. Simple Admin Login PHP Script (5971)
  5. Selection Tools (5795)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (471)
  2. Register and show online users and visitors (334)
  3. JavaScript Course - Free lessons (248)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (248)
  5. querySelector and querySelectorAll (236)