Hvordan legge til klassenavn til HTML -elementet gjennom JavaScript?

JavaScript gir et par tilnærminger for å legge klassenavnet til et HTML -element som for eksempel “.Legg til () ”-metode og “.klassenavn" eiendom. Klassenavn kan legges til elementer ved bruk av CSS (Cascading Style Sheet) og JavaScript. Hovedformålet med å legge klassenavn til et HTML -element er å oppnå forskjellige funksjonaliteter på det valgte elementet ved hjelp av det spesifiserte klassenavnet.

De nedenfor-listede JavaScript-tilnærmingene kan brukes til å legge klassenavnet til et HTML-element:

• Hva er ".Legg til () ”i JavaScript?
• Hvordan gjør “.Legg til () ”metodearbeid i JavaScript?
• Hva er ".Klassenavn ”i JavaScript?
• Hvordan gjør “.ClassName ”eiendomsarbeid i JavaScript?

Så la oss komme i gang!

Hva er ".Legg til () ”i JavaScript?

“.add () ”er en innebygd metode for klasselisteegenskapen som kan brukes til å legge til klassenavnet til ethvert spesifikt HTML-element. Utdraget nedenfor lar deg forstå hvordan du bruker “.Legg til ”-metode i JavaScript:

element.Klasseliste.legg til ("class_name");

Hvordan gjør “.Legg til () ”metodearbeid i JavaScript?

Denne delen vil presentere en trinn-for-trinns guide for å forstå hvordan du legger til klassenavnet til et HTML-element ved hjelp av JavaScript.

I dette programmet lager vi tre filer en "HTML" -fil, en "CSS" -fil og en "JavaScript" -fil:

Html

Hvordan legge til klassenavn til HTML -elementet gjennom JavaScript?

Klikk på meg!

Klikk på "Klikk meg!"-knappen vil legge til klassenavnet til følgende P -element

Velkommen til Linuxhint.com!!

I ovennevnte utdrag utførte vi følgende funksjonaliteter:

• Vi benyttet oss av

  Tag for å legge til en overskrift.

• Deretter benyttet vi taggen for å lage en knapp og kalte den som “Klikk meg!”.
• Påkalte “ClassNameFun ()” når brukeren klikket på knappen.
• Deretter opprettet vi en

  element.

• Til slutt opprettet vi et avsnitt ved hjelp av

  element og tildelt det en ID “addclass”.

CSS

.stil
tekst-align: sentrum;
Font-stil: kursiv;
bakgrunnsfarge: svart;
Farge: Hvit;

CSS -filen serverte følgende funksjoner:

• Juster teksten i sentrum ved hjelp av egenskapen "tekst-align".
• Angi den kursiske fontstilen ved å bruke "Font-stil" -egenskap.
• Angi den svarte bakgrunnsfargen ved å bruke "bakgrunnsfarge" -egenskap.
• Til slutt, sett den hvite tekstfargen ved hjelp av "farge" -egenskapen.

JavaScript

funksjon classNameFun ()
La para = dokument.getElementById ("Addclass");
para.Klasseliste.Legg til ("stil");

De .JS eller JavaScript-fil serverte de nedenfor-listede funksjonalitetene:

• Opprettet en funksjon som heter “ClassNameFun ()”.
• Brukte metoden GetElementById () for å lese/redigere et HTML -element som har en ID “Addclass”.
• Til slutt, benyttet ADD -metoden for å legge navnet til

  element.

Produksjon
Ved vellykket utførelse av koden, vil vi i utgangspunktet få følgende utdata:

Klikk på “Klikk meg!”-Knappen vil generere den undergitte utgangen:

Slik “.Legg til () ”metodearbeid i JavaScript.

Hva er ".Klassenavn ”i JavaScript?

“.ClassName ”er en eiendom i JavaScript som setter/returnerer klasseattributtene til et HTML -element. Det kan brukes til å legge til/spesifisere klassenavnet til hvilken som helst HTML -tag.

Følgende utdrag vil vise den grunnleggende syntaksen til ".Klassenavn ”Eiendom:

element.className = class_name;

Her representerer "Class_name" navnet på klassen. I tilfelle av flere klasser kan vi spesifisere klassens navn ved hjelp av komma -separert syntaks.

Hvordan gjør “.ClassName ”eiendomsarbeid i JavaScript?

La oss vurdere det gitte eksemplet nedenfor for å få den grunnleggende forståelsen av ".ClassName ”eiendom.

Html

Hvordan legge til klassenavn til HTML -elementet gjennom JavaScript?

Klikk på meg!

Klikk på "Klikk meg!"-knappen vil legge til klassenavnet til dette elementet

HTML -klassen utførte følgende oppgaver:

• Benyttet

  element for å legge til en overskrift.

• Brukte tag for å opprette en knapp og kalte den som “Klikk meg!”.
• Påkalte “ClassNameFun ()” når brukeren klikket på knappen.
• Til slutt opprettet en

  og tildelt det en ID “addclass”.

CSS

CSS -filen vil forbli den samme som i forrige eksempel.

JavaScript

funksjon classNameFun ()
La Helement = dokument.getElementById ("Addclass");
Helement.className = "Style";

I JavaScript -filen benyttet vi getElementById () Metode for å lese/redigere et HTML -element som har en ID “.addclass ”. Etterpå benyttet vi ADD -metoden for å legge navnet til

element.

Produksjon
Når vi kjører det ovennevnte programmet, i utgangspunktet, vil dette programmet produsere den undergitte utgangen:

Etter å ha klikket på “Klikk meg!”-Knappen, ClassNameFun () vil bli påkalt, følgelig får vi følgende utdata:

Utgangen tydeliggjør at klassenavnet er lagt til med suksess til

element.

Konklusjon

I JavaScript, ".legg til () ”-metode og“.ClassName ”-egenskap brukes til å legge til klassenavnet til et hvilket som helst HTML -element. Denne oppskrivningen forklarte alt det grunnleggende for å legge til klassenavn til et hvilket som helst HTML-element. Dette innlegget forklarte hvordan du bruker “.legg til () ”-metode og“.ClassName ”eiendom ved hjelp av noen passende eksempler.