Hvordan kan du plassere CSS i JavaScript?

“Cascading Style Sheet (CSS)”Er viktig for å bruke styling på den overordnede dokumentdesignen og gjøre en webside attraktiv og brukervennlig. Mer spesifikt er det veldig nyttig å plassere CSS i JavaScript.

Denne oppskrivningen vil diskutere eksempler på å koble CSS med JavaScript.

Hvordan kan du plassere CSS i JavaScript?

CSS kan plasseres i JavaScript ved å få HTML Head -elementet, lage et nytt lenkeelement og sette sine attributter for tilgang til den aktuelle CSS -filen.

Sjekk ut det oppgitte eksemplet for å forstå de uttalte konseptene.

Eksempel 1: Opprette en lenke i JavaScript og legge den til overskriften ved hjelp av CSS

I det følgende eksempelet, få HTML -hodeelementet ved å bruke “dokument.getElementsByTagName ()”Metode som vil inkludere et element i DOM (Document Object Model) dynamisk:

var htmlhead = dokument.getElementsByTagName ('Head') [0];

Lag nå et nytt lenkeelement ved å bruke "dokument.CreateElement ()”Metode:

var linkcss = dokument.CreateElement ('Link');

Sett deretter attributtene for det opprettede lenkeelementet for relatert til det gjeldende dokumentet med det koblede dokumentet (CSS) ved å spesifisere filtypen og filnavnet som følger:

Linkcss.rel = 'stilark';
Linkcss.type = 'tekst/css';
Linkcss.href = 'linkcss.CSS ';

“vedlegg ()”Metode vil legge til koblingselementet som er spesifisert som argument til HTML -hodet:

htmlhead.vedlegg (lenke);

I trinnet nedenfor får du tilgang til det opprettede elementet som heter “lenke”Bruke klasseattributtet:

Plasser CSS i JavaScript

Til slutt, bruk CSS -stylingen på den ekstra overskriften.

CSS -kode

.lenke
Farge: blå;
Font-størrelse: 24px;
tekst-align: sentrum;

Produksjon

I output ovenfor kan det observeres at CSS -stylingen brukes på den spesifiserte overskriften ved å få tilgang til den opprettede lenken i JavaScript.

Eksempel 2: Opprette en lenke i JavaScript og legge den til Div ved hjelp av CSS

I det følgende eksemplet, gjenta de ovennevnte trinnene for å få HTML-hodeelementet, opprette et nytt lenkeelement, tilordne attributtene for det opprettede koblingselementet, og legg til koblingselementet til HTML-hodet:

var linkcss = dokument.CreateElement ('Link');
Linkcss.rel = 'stilark';
Linkcss.type = 'tekst/css';
Linkcss.href = 'linkcss2.CSS '; dokument.getElementsByTagName ('Head') [0].appendchild (linkcss);

Deretter inkluderer en "div”I HTML og tilgang til den opprettede koblingen med følgende verdi som skal vises på DOM:

Plasser CSS i JavaScript

Til slutt, implementer CSS -styling på den spesifiserte DIV ved å referere til det opprettede elementet ".lenke”. Stylingen inkluderer justerende fontstørrelse, fontvekt, farge, bakgrunnsfarge, polstring og tekstjustering:

CSS -kode

.lenke
Font-størrelse: 24px;
Fontvekt: fet;
Farge: Hvit;
bakgrunnsfarge: grønn;
polstring: 10px;
tekst-align: sentrum;

Produksjon

Vi har forklart prosedyren for å plassere CSS i JavaScript.

Konklusjon

CSS kan plasseres i JavaScript ved å få HTML -hodet, lage et nytt element og sette attributtene for det, noe som resulterer i å koble den spesielle CSS -filen og legge den til HTML -hodet for å bli brukt på overskriften eller DIV. Denne bloggen demonstrerte konseptet med å plassere CSS i JavaScript ved hjelp av eksempler.