Sterge si Adauga class CSS

Functia prezentata in aceasta pagina poate fi utilizata pentru a sterge si adauga o anumita clasa CSS (class) cu JavaScript la mai multe elemente HTML.
- Functia are 3 parametri, primeste un Array cu ID-urile elementelor HTML din care va sterge clasa, un alt Array cu ID-urile elementelor HTML in care va adauga clasa, si numele clasei.
Aceasta e functia, denumita delAddClass().

// sterge clasa din ID-urile din "dlcls" (array cu ID-uri), adauga  clasa la ID-urile din "adcls" (array cu ID-uri)
// "cls" contine numele clasei
function delAddClass(dlcls, adcls, cls) {
 // de la: https://marplo.net/javascript/
  // numarul de elemente in array-urile din parametri
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // parcurge array-urile, sterge "class" din "dlcls", adauga clasa la cele din "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;
  }
}

- Exemplu. Doua butoane care apeleaza functia delAddClass(), la clic pe ele. Sterge /schimba clasa CSS la unele DIV-uri.

<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title>Exemplu 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">Adauga cls1</button>
 <button id="btn2">Adauga 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"><!--
// sterge clasa din ID-urile din "dlcls" (array cu ID-uri), adauga  clasa la ID-urile din "adcls" (array cu ID-uri)
// "cls" contine numele clasei
function delAddClass(dlcls, adcls, cls) {
 // de la: https://marplo.net/javascript/
  // numarul de elemente in array-urile din parametri
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // parcurge array-urile, sterge "class" din "dlcls", adauga clasa la cele din "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;
  }
}

// array-uri cu ID-urile
var ids1 = ['dv1', 'dv3', 'dv5'];
var ids2 = ['dv2', 'dv4', 'dv6'];

// inregistreaza eveniment onclick pentru #btn1, btn2 ca sa apeleze delAddClass()
document.getElementById('btn1').onclick = function(){ delAddClass(ids2, ids1, 'cls1'); }
document.getElementById('btn2').onclick = function(){ delAddClass(ids1, ids2, 'cls2'); }
//-->
</script>

</body>
</html>

Demo (clic pe butoane):

- Functia delAddClass() poate fi utilizata si doar pentru a sterge, sau a adauga o clasa la anumite elemente HTML, adaugand un array gol la argument.

delAddClass( [ ], ids2, 'cls1'); // doar adauga class, nu sterge
delAddClass(ids2, [ ], 'cls1'); // doar sterge clasa, nu adauga

<<-Impartire Sir Alfanumeric in .. -- Inlocuieste nume de variabile ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag este element de tip bloc?

<div>Web Programming and Development</div>

Care cod CSS afiseaza textul subliniat?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".

has't played haven't been playing will haven't played

The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.

Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".

habrá contado va a contar contaba

Él no habrá contado el cuento.
- El nu ar fi spus povestea.