Klases atribūtu var izmantot CSS, lai veiktu dažus uzdevumus elementiem ar atbilstošo klases nosaukumu. Šajā rakstā mēs runājam par to, kā elementam pievienot klasi, izmantojot JavaScript. In JavaScript , ir dažas pieejas, kā elementam pievienot klasi. Mēs varam izmantot .className īpašums vai .add() metode, lai konkrētajam elementam pievienotu klases nosaukumu.
Tagad apspriedīsim pieejas, kā elementam pievienot klasi.
Izmantojot rekvizītu .className
The .className rekvizīts iestata elementa klases nosaukumu. Šo rekvizītu var izmantot, lai atgrieztu elementa klases atribūta vērtību. Mēs varam izmantot šo rekvizītu, lai HTML elementam pievienotu klasi, neaizstājot tā esošo klasi.
Lai pievienotu vairākas klases, mums ir jāatdala to nosaukums ar atstarpi, piemēram, 'klase1 klase2' .
Ja klase jau ir deklarēta elementam un mums ir jāpievieno jauns klases nosaukums tam pašam elementam, tad tas ir jādeklarē, ievietojot atstarpi pirms jaunā klases nosaukuma rakstīšanas, pretējā gadījumā tā pārrakstīs esošo klases nosaukumu. To var uzrakstīt šādi:
document.getElementById('div1').className = ' newClass';
Iepriekš minētajā kodā mēs iepriekš esam ievietojuši atstarpi jauna klase .
Sintakse
Tālāk ir norādīta šī rekvizīta bieži lietotā sintakse, lai iestatītu vai atgrieztu klases nosaukumu.
Lai iestatītu klases nosaukumu
element.className = class
Lai atgrieztu klases nosaukumu
element.className
Piemērs, kā izmantot .className īpašums ir norādīts šādi.
Piemērs — klases nosaukuma pievienošana
Šajā piemērā mēs izmantojam .className rekvizīts, lai pievienotu 'priekš' klase rindkopas elementam ar id 'p1' . Mēs izmantojam CSS attiecīgajai rindkopai, izmantojot klases nosaukumu 'priekš' .
Mums ir jānoklikšķina uz dotā HTML poga 'Pievienot klasi' lai redzētu efektu.
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'); } Izmēģiniet to tagad Izvade
Pēc noklikšķināšanas uz dotās pogas izvade būs -
