Denne veiledningen utdyper formålet med og funksjonen til HTML DOM Element 'stil'-egenskapen i JavaScript.
Hvordan fungerer HTML DOM-elementets «stil»-egenskap i JavaScript?
HTML DOM ' stil ” er en skrivebeskyttet egenskap som fungerer basert på de tildelte stylingegenskapene tilsvarende. Den returnerer også ' CSSStyleDeclaration ”-objekt som inneholder alle de innebygde stilattributtene til det bestemte HTML-elementet.
Merk: 'CSSStyleDeclaration'-objektet inneholder CSS-stilattributtene som er definert i head-delen.
Syntaks (Angi en stilegenskap)
element. stil . eiendom = verdiI henhold til syntaksen ovenfor, ' stil ' egenskapen støtter bare én parameter ' verdi ” som representerer verdien av den spesifiserte stilegenskapen.
Syntaks (retur en stilegenskap)
element. stil . eiendomLa oss implementere de ovenfor diskuterte syntaksene til 'stil'-egenskapen praktisk talt.
Eksempel 1: Bruk 'stil'-egenskapen for å angi fargen på et bestemt HTML-element
Dette eksemplet bruker den grunnleggende syntaksen til ' stil ”-egenskapen for å angi verdien til “style”-egenskapen slik at fargen på det bestemte HTML-elementet endres.
HTML-kode
Gå først gjennom den gitte HTML-koden:
< h2 > Bruk stilen Property i JavaScript h2 >
< h3 id = 'H3' > Andre underoverskrift. h3 >
I kodelinjene ovenfor:
- « HTML-taggen spesifiserer den første underoverskriften.
- « '-taggen oppretter den andre underoverskriften på nivå 3 med en tilordnet id 'H3'.
JavaScript-kode
Deretter følger du den angitte JavaScript-koden:
< manus >dokument. getElementById ( 'H3' ) . stil . farge = 'grønn' ;
manus >
I kodebiten ovenfor, ' document.getElementById() '-metoden gir tilgang til den inkluderte ' ' element via sin id ' H3 ' for å angi den angitte ' farge ' attributtverdien til elementet via ' stil.farge ' eiendom.
Produksjon
Utdataene viser at den målrettede HTML-elementets visuelle representasjon er satt tilsvarende ved å bruke 'stil'-egenskapen.
Eksempel 2: Bruk 'style'-egenskapen for å få verdien av det anvendte 'style'-attributtet
I dette eksemplet hjelper 'style'-egenskapen med å finne ut det tilordnede 'style'-attributtet til HTML-elementet ved å bruke dets generaliserte syntaks (Return a style Property).
HTML-kode
HTML-koden er oppgitt her:
< h2 > Bruk stilen Property i JavaScript h2 >< h3 id = 'H3' stil = 'bakgrunnsfarge:oransje;' > Verdien av bakgrunnsfargen for andre underoverskrift er : h3 >
< h4 id = 'demo' > h4 >
I denne koden:
- « HTML-taggen bruker «style»-attributtet som angir bakgrunnsfargen til «
» HTML-elementet.
- « '-taggen oppretter en tom underoverskrift på nivå 4 med en id ' demo '.
JavaScript-kode
Se nå på den gitte JavaScript-koden:
< manus >konst verdi = dokument. getElementById ( 'H3' ) . stil . bakgrunnsfarge ;
dokument. getElementById ( 'demo' ) . indreHTML = verdi ;
manus >
I den ovennevnte koden:
- Variabelen ' verdi ' er erklært med en ' konst ' søkeord som bruker ' document.getElementById() '-metoden for å hente '
'-elementet ved å bruke ID-en for å få verdien av det anvendte 'style'-attributtet og bruke det på elementet, dvs. '
' via 'style'-egenskapen.
- 'document.getElementById()'-metoden brukes igjen for å få tilgang til det tomme '
'-elementet som er lagt til og vise verdien av det tildelte 'style'-attributtet mot det hentede HTML-elementet og legge det til som en underoverskrift via ' indreHTML ' eiendom.
Produksjon
Utdataene bruker bakgrunnsfargen på elementet, og verdien av det angitte 'stil'-attributtet returneres også tilsvarende.
Konklusjon
JavaScript bruker ' stil ' egenskap for å tilordne og returnere de innebygde 'stil'-egenskapene til HTML DOM-elementet. Det krever en ekstra 'verdi' for å bruke ønsket funksjonalitet tilsvarende. Bortsett fra innstilling og henting, er det også fordelaktig å endre det eksisterende 'stil'-attributtet. Denne veiledningen demonstrerte hovedmålet, den fungerende og praktiske implementeringen av HTML DOM Element-stilegenskapen.