Curs Javascript

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 HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Sterge si Adauga class CSS

Last accessed pages

  1. Utilizare Gradient (538)
  2. Pronume posesiv (1502)
  3. Auto schimbare imagini (1353)
  4. Verbe modale 2 - Teste incepatori (7497)
  5. Verificare si Validare caractere din formular (953)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (305)
  2. Curs si Tutoriale JavaScript (172)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (171)
  4. Curs HTML gratuit Tutoriale HTML5 (167)
  5. Curs CSS Online Tutoriale CSS3 (152)