Tämä opas käsittelee JavaScriptin HTML DOM Element 'tyyli' -ominaisuuden tavoitetta ja toimintaa.
Kuinka HTML DOM -elementin 'tyyli'-ominaisuus toimii JavaScriptissä?
HTML DOM ' tyyli ” on vain luku -ominaisuus, joka toimii määritettyjen tyyliominaisuuksien perusteella. Lisäksi se palauttaa ' CSSStyleDeclaration ”-objekti, joka sisältää kaikki tietyn HTML-elementin tekstin sisäiset tyyliattribuutit.
Huomautus: 'CSSStyleDeclaration' -objekti sisältää head-osiossa määritellyt CSS-tyyliattribuutit.
Syntaksi (määritä tyyliominaisuus)
elementti. tyyli . omaisuutta = arvoYllä olevan syntaksin mukaan ' tyyli 'ominaisuus tukee vain yhtä parametria' arvo ', joka edustaa määritetyn tyyliominaisuuden arvoa.
Syntaksi (Palauta tyyliominaisuus)
elementti. tyyli . omaisuuttaToteutetaan yllä käsitellyt 'style' -ominaisuuden syntaksit käytännössä.
Esimerkki 1: Käytä 'tyyli'-ominaisuutta asettaaksesi tietyn HTML-elementin värin
Tämä esimerkki soveltaa perussyntaksia ' tyyli ”-ominaisuus asettaaksesi 'style'-ominaisuuden arvon siten, että tietyn HTML-elementin väri muuttuu.
HTML-koodi
Käy ensin läpi annettu HTML-koodi:
< h2 > Käytä JavaScriptissä tyylin ominaisuutta h2 >
< h3 id = 'H3' > Toinen alaotsikko. h3 >
Yllä olevilla koodiriveillä:
- ' ”HTML-tunniste määrittää ensimmäisen alaotsikon.
- ' ' -tunniste luo tason 3 toisen alaotsikon, jonka tunnus on 'H3'.
JavaScript-koodi
Seuraa seuraavaksi ilmoitettua JavaScript-koodia:
< käsikirjoitus >asiakirja. getElementById ( 'H3' ) . tyyli . väri = 'vihreä' ;
käsikirjoitus >
Yllä olevassa koodinpätkässä ' document.getElementById() '-menetelmä käyttää mukana ' 'elementti tunnuksensa kautta' H3 ' määrittääksesi määritetyn ' väri ' elementin attribuutin arvo ' tyyli.väri ” omaisuutta.
Lähtö
Tulos osoittaa, että kohdistettu HTML-elementin visuaalinen esitys on asetettu vastaavasti 'style'-ominaisuuden avulla.
Esimerkki 2: Käytä 'style'-ominaisuutta saadaksesi sovelletun 'style'-attribuutin arvon
Tässä esimerkissä 'style'-ominaisuus auttaa selvittämään HTML-elementille määritetyn 'style'-attribuutin käyttämällä sen yleistettyä syntaksia (Palauta tyyliominaisuus).
HTML-koodi
HTML-koodi on tässä:
< h2 > Käytä JavaScriptissä tyylin ominaisuutta h2 >< h3 id = 'H3' tyyli = 'taustaväri:oranssi;' > Toisen alaotsikon taustavärin arvo on : h3 >
< h4 id = 'demo' > h4 >
Tässä koodissa:
- ' HTML-tunniste käyttää 'style'-attribuuttia, joka määrittää '
' HTML-elementin taustavärin.
- ' ' -tunniste luo tyhjän tason 4 alaotsikon, jolla on tunnus ' demo ”.
JavaScript-koodi
Katso nyt annettua JavaScript-koodia:
< käsikirjoitus >konst arvo = asiakirja. getElementById ( 'H3' ) . tyyli . taustaväri ;
asiakirja. getElementById ( 'demo' ) . innerHTML = arvo ;
käsikirjoitus >
Yllä kirjoitetussa koodissa:
- Muuttuja ' arvo ' ilmoitetaan ' konst ' avainsana, joka käyttää ' document.getElementById() ' -menetelmää noutaaksesi '
'-elementin sen tunnuksella saadakseen käytetyn 'style'-attribuutin arvon ja soveltaakseen sitä elementtiin eli '
' 'style'-ominaisuuden kautta.
- Menetelmää 'document.getElementById()' käytetään uudelleen lisätyn tyhjän '
'-elementin avaamiseen ja osoitetun 'style'-attribuutin arvon näyttämiseen haettua HTML-elementtiä vastaan ja sen liittämiseen alaotsikkona ' innerHTML ” omaisuutta.
Lähtö
Tulos käyttää taustaväriä elementtiin ja myös 'style'-attribuutin arvo palautetaan vastaavasti.
Johtopäätös
JavaScript käyttää ' tyyli ”-ominaisuus määrittää ja palauttaa HTML DOM -elementin rivin 'tyyli'-ominaisuudet. Se vaatii ylimääräisen 'arvon', jotta haluttu toiminto voidaan soveltaa vastaavasti. Asettamisen ja hakemisen lisäksi on myös hyödyllistä muuttaa olemassa olevaa 'tyyli'-attribuuttia. Tämä opas esitteli HTML DOM Element -tyyliominaisuuden päätavoitteen, toiminnan ja käytännön toteutuksen.