Denne vejledning uddyber formålet med og virkemåden af HTML DOM Element 'stil' egenskaben i JavaScript.
Hvordan fungerer HTML DOM Element 'stil' egenskaben i JavaScript?
HTML DOM ' stil ” er en skrivebeskyttet ejendom, der fungerer ud fra de tildelte stylingegenskaber i overensstemmelse hermed. Det returnerer også ' CSSStyleDeclaration ”-objekt, der indeholder alle de inline-stilattributter for det bestemte HTML-element.
Bemærk: Objektet 'CSSStyleDeclaration' indeholder CSS-styling-attributterne, der er defineret i hovedafsnittet.
Syntaks (Indstil en stilegenskab)
element. stil . ejendom = værdiIfølge ovenstående syntaks er ' stil ' egenskab understøtter kun én parameter ' værdi ”, der repræsenterer værdien af den angivne stylingegenskab.
Syntaks (Returner en stilegenskab)
element. stil . ejendomLad os implementere de ovenfor diskuterede syntakser for egenskaben 'stil' praktisk talt.
Eksempel 1: Brug egenskaben 'stil' til at indstille farven på et bestemt HTML-element
Dette eksempel anvender den grundlæggende syntaks for ' stil ” egenskab for at indstille værdien af egenskaben “stil”, således at farven på det bestemte HTML-element ændres.
HTML kode
Gå først den givne HTML-kode igennem:
< h2 > Brug stilen Property i JavaScript h2 >
< h3 id = 'H3' > Anden underoverskrift. h3 >
I ovenstående kodelinjer:
- Det ' HTML-tag angiver den første underoverskrift.
- Det ' ” tag opretter den anden underoverskrift på niveau 3 med et tildelt id “H3”.
JavaScript kode
Følg derefter den angivne JavaScript-kode:
< manuskript >dokument. getElementById ( 'H3' ) . stil . farve = 'grøn' ;
manuskript >
I ovenstående kodestykke er ' document.getElementById() ”-metoden får adgang til den inkluderede ” ' element via dets id ' H3 ' for at indstille den angivne ' farve ' attributværdi for elementet via ' stil.farve ” ejendom.
Produktion
Outputtet viser, at den målrettede HTML-elements visuelle repræsentation er indstillet i overensstemmelse hermed ved hjælp af egenskaben 'stil'.
Eksempel 2: Brug egenskaben 'stil' til at få værdien af den anvendte 'stil'-attribut
I dette eksempel hjælper egenskaben 'stil' med at finde ud af den tildelte 'stil'-attribut for HTML-elementet ved hjælp af dets generaliserede syntaks (Returner en stilegenskab).
HTML kode
HTML-koden er angivet her:
< h2 > Brug stilen Property i JavaScript h2 >< h3 id = 'H3' stil = 'baggrundsfarve:orange;' > Værdien af anden underoverskrifts baggrundsfarve er : h3 >
< h4 id = 'demo' > h4 >
I denne kode:
- Det ' ” HTML-tag bruger “style”-attributten, der indstiller baggrundsfarven for “
” HTML-elementet.
- Det ' ' tag opretter en tom underoverskrift på niveau 4 med et id ' demo ”.
JavaScript kode
Se nu på den givne JavaScript-kode:
< manuskript >konst værdi = dokument. getElementById ( 'H3' ) . stil . baggrundsfarve ;
dokument. getElementById ( 'demo' ) . indreHTML = værdi ;
manuskript >
I den ovenfor skrevne kode:
- Variablen ' værdi ' erklæres med et ' konst ' søgeord, der anvender ' document.getElementById() ”-metoden til at hente “
”-elementet ved hjælp af dets id til at få værdien af den anvendte “style”-attribut og anvende den på elementet, dvs. “
” via egenskaben “style”.
- Metoden 'document.getElementById()' bruges igen til at få adgang til det tilføjede tomme '
'-element og vise værdien af den tildelte 'style'-attribut mod det hentede HTML-element og tilføje det som en underoverskrift via ' indreHTML ” ejendom.
Produktion
Outputtet anvender baggrundsfarven på elementet, og værdien af den indstillede 'stil'-attribut returneres også i overensstemmelse hermed.
Konklusion
JavaScript bruger ' stil ” egenskab for at tildele og returnere de inline “stil” egenskaber for HTML DOM-elementet. Det kræver en ekstra 'værdi' at anvende den ønskede funktionalitet i overensstemmelse hermed. Udover at indstille og hente, er det også en fordel at ændre den eksisterende 'stil'-attribut. Denne vejledning demonstrerede hovedformålet, den fungerende og praktiske implementering af HTML DOM Element-stilegenskaben.