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