Klasės atributas gali būti naudojamas CSS norint atlikti kai kurias užduotis elementams su atitinkamu klasės pavadinimu. Šiame straipsnyje aptariame, kaip pridėti klasę prie elemento naudojant „JavaScript“. Į JavaScript , yra keletas būdų, kaip pridėti klasę prie elemento. Mes galime naudoti .className turtas arba .papildyti() būdas pridėti klasės pavadinimą prie konkretaus elemento.
Dabar aptarkime būdus, kaip pridėti klasę prie elemento.
Naudojant .className nuosavybę
The .className ypatybė nustato elemento klasės pavadinimą. Ši savybė gali būti naudojama norint grąžinti elemento klasės atributo vertę. Šią ypatybę galime naudoti norėdami pridėti klasę prie HTML elemento, nepakeisdami esamos klasės.
Norėdami pridėti kelias klases, turime atskirti jų pavadinimą tarpu, pvz., '1 klasė 2 klasė' .
Jei klasė jau yra deklaruota elementui ir prie to paties elemento reikia pridėti naują klasės pavadinimą, tada jis turėtų būti deklaruojamas įterpiant tarpą prieš rašant naują klasės pavadinimą, kitaip jis perrašys esamą klasės pavadinimą. Jis gali būti parašytas taip:
document.getElementById('div1').className = ' newClass';
Aukščiau pateiktame kode anksčiau įterpėme tarpą nauja klasė .
Sintaksė
Toliau pateikiama dažniausiai naudojama šios ypatybės sintaksė, norint nustatyti arba grąžinti klasės pavadinimą.
Norėdami nustatyti klasės pavadinimą
element.className = class
Norėdami grąžinti klasės pavadinimą
element.className
Naudojimo pavyzdys .className turtas pateikiamas taip.
Pavyzdys – klasės pavadinimo pridėjimas
Šiame pavyzdyje mes naudojame .className nuosavybė, skirta pridėti 'dėl' klasė į pastraipos elementą, turintį id 'p1' . Mes taikome CSS atitinkamai pastraipai naudodami klasės pavadinimą 'dėl' .
Turime spustelėti duotą HTML mygtukas „Pridėti klasę“ norėdami pamatyti efektą.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Išbandykite dabar Išvestis
Spustelėjus nurodytą mygtuką, išvestis bus -
