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

Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?

type="text" type="number" type="date"

<input type="number" name="points" min="5" max="80" />

Ce proprietate CSS permite modificarea transparentei unui element?

font-style opacity color

#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}

Clic pe functia care formateaza un numar la o anumita lungime de caractere.

toPrecision() exp() toFixed()

var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8

Ce functie aranjeaza aleator elementele dintr-un array?

natsort() shuffle() sort()

$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")

Indicati Superlativul cuvantului "good" (bun).

better best goodest

She is the best in our class.
- Ea este cea mai buna din clasa noastra.

Care este Superlativul cuvantului "bueno" (bun)?

el mejor más bueno muy bueno

Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.