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 e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Sterge si Adauga class CSS

Last accessed pages

  1. Conditional IF - Exercitii si teste engleza incepatori (14091)
  2. Curs PHP MySQL, Tutoriale si Scripturi PHP (108532)
  3. Titluri, Paragrafe, Un nou rand, Linie orizontala (24165)
  4. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (51082)
  5. Gramatica limbii engleze - Prezentare Generala (180773)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3804)
  2. Curs HTML gratuit Tutoriale HTML5 (3123)
  3. Curs si Tutoriale JavaScript (2797)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (2644)
  5. Curs si Tutoriale Ajax (2552)