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):


1
2
3

4
5
6


- 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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Sterge si Adauga class CSS

Last accessed pages

  1. Blog si Cugetari Personale (14663)
  2. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (48505)
  3. Gramatica limbii engleze - Prezentare Generala (123528)
  4. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (30374)
  5. Caractere speciale - Entitati HTML (4311)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (6185)
  2. Curs HTML gratuit Tutoriale HTML5 (5089)
  3. Curs si Tutoriale JavaScript (4154)
  4. Curs CSS Online Tutoriale CSS3 (3996)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (3761)