Ang gabay na ito ay nagpapaliwanag sa layunin at paggana ng HTML DOM Element na 'estilo' na property sa JavaScript.
Paano Gumagana ang HTML DOM Element 'style' Property sa JavaScript?
Ang HTML DOM “ istilo ” ay isang read-only na property na gumagana batay sa mga nakalaan na katangian ng pag-istilo nang naaayon. Gayundin, ibinabalik nito ang ' CSSStyleDeclaration ” object na naglalaman ng lahat ng inline na katangian ng istilo ng partikular na elemento ng HTML.
Tandaan: Ang object na 'CSSStyleDeclaration' ay naglalaman ng mga katangian ng CSS styling na tinukoy sa head section.
Syntax (Magtakda ng Style Property)
elemento. istilo . ari-arian = halagaAyon sa syntax sa itaas, ang ' istilo 'Ang property ay sumusuporta lamang sa isang parameter' halaga ” na kumakatawan sa halaga ng tinukoy na styling property.
Syntax (Ibalik ang isang style na Property)
elemento. istilo . ari-arianIpatupad natin ang mga napag-usapan sa itaas na mga syntax ng 'estilo' na property nang praktikal.
Halimbawa 1: Gamitin ang 'style' Property para Itakda ang Kulay ng Partikular na HTML Element
Inilalapat ng halimbawang ito ang pangunahing syntax ng “ istilo ” property upang itakda ang halaga ng property na “style” upang ang kulay ng partikular na elemento ng HTML ay mapalitan.
HTML Code
Una, dumaan sa ibinigay na HTML code:
< h2 > Gamitin ang istilong Property sa JavaScript h2 >
< h3 id = 'H3' > Pangalawang Subheading. h3 >
Sa mga linya ng code sa itaas:
- Ang ' ” Tinutukoy ng HTML tag ang unang subheading.
- Ang ' Ginagawa ng tag na ” ang pangalawang subheading ng level 3 na may nakatalagang id na “H3”.
JavaScript Code
Susunod, sundin ang nakasaad na JavaScript code:
< script >dokumento. getElementById ( 'H3' ) . istilo . kulay = 'berde' ;
script >
Sa snippet ng code sa itaas, ang “ document.getElementById() Ina-access ng ' method ang kasamang ' 'elemento sa pamamagitan ng id nito' H3 'upang itakda ang tinukoy na' kulay ” attribute value ng elemento sa pamamagitan ng “ istilo.kulay ” ari-arian.
Output
Ipinapakita ng output na ang naka-target na visual na representasyon ng elemento ng HTML ay itinakda nang naaayon gamit ang property na 'style'.
Halimbawa 2: Gamitin ang 'style' Property para Kunin ang Value ng Applied 'style' Attribute
Sa halimbawang ito, ang property na 'style' ay nakakatulong sa pag-alam ng nakatalagang 'style' na attribute ng HTML element gamit ang generalized syntax nito (Return a style Property).
HTML Code
Ang HTML code ay nakasaad dito:
< h2 > Gamitin ang istilong Property sa JavaScript h2 >< h3 id = 'H3' istilo = 'kulay ng background:orange;' > Ang halaga ng kulay ng background ng pangalawang subheading ay : h3 >
< h4 id = 'demo' > h4 >
Sa code na ito:
- Ang ' ” Gumagamit ang HTML tag ng attribute na “style” na nagtatakda ng kulay ng background ng “
” na elemento ng HTML.
- Ang ' Ang tag na ” ay gumagawa ng walang laman na subheading ng level 4 na mayroong id “ demo ”.
JavaScript Code
Ngayon, tingnan ang ibinigay na JavaScript code:
< script >const halaga = dokumento. getElementById ( 'H3' ) . istilo . kulay ng background ;
dokumento. getElementById ( 'demo' ) . panloobHTML = halaga ;
script >
Sa nakasulat sa itaas na code:
- Ang variable ' halaga ' ay ipinahayag na may ' const ” keyword na nalalapat ang “ document.getElementById() ” na paraan para makuha ang elementong “
” gamit ang id nito para makuha ang value ng inilapat na attribute na “style” at ilapat ito sa elemento i.e., “
” sa pamamagitan ng property na “style”.
- Ang 'document.getElementById()' na paraan ay ginamit muli upang ma-access ang idinagdag na walang laman na '
' na elemento at ipakita ang halaga ng inilalaang katangian na 'style' laban sa kinuhang HTML na elemento at idagdag ito bilang isang subheading sa pamamagitan ng ' panloobHTML ” ari-arian.
Output
Inilalapat ng output ang kulay ng background sa elemento at ang halaga ng set na 'style' na katangian ay ibinalik din nang naaayon.
Konklusyon
Ginagamit ng JavaScript ang ' istilo ” property para italaga at ibalik ang inline na “style” na mga katangian ng HTML DOM element. Nangangailangan ito ng karagdagang 'halaga' upang mailapat ang nais na paggana nang naaayon. Bukod sa pagtatakda at pagkuha, kapaki-pakinabang din na baguhin ang umiiral na katangiang 'estilo'. Ipinakita ng gabay na ito ang pangunahing layunin, gumagana, at praktikal na pagpapatupad ng HTML DOM Element style Property.