Šiame vadove išsamiai aprašomas „JavaScript“ HTML DOM elemento „stiliaus“ savybės tikslas ir veikimas.
Kaip „JavaScript“ veikia HTML DOM elemento „stiliaus“ nuosavybė?
HTML DOM “ stilius “ yra tik skaitoma nuosavybė, kuri veikia atitinkamai pagal priskirtas stiliaus ypatybes. Be to, jis grąžina „ CSSStyleDeclaration “ objektas, kuriame yra visi konkretaus HTML elemento eilutės stiliaus atributai.
Pastaba: Objekte „CSSStyleDeclaration“ yra CSS stiliaus atributų, apibrėžtų antraštės skiltyje.
Sintaksė (nustatyti stiliaus ypatybę)
elementas. stilius . nuosavybė = vertėPagal pirmiau pateiktą sintaksę „ stilius 'ypatybė palaiko tik vieną parametrą' vertė “, kuris reiškia nurodytos stiliaus ypatybės vertę.
Sintaksė (grąžinti stiliaus ypatybę)
elementas. stilius . nuosavybėPraktiškai įgyvendinkime aukščiau aptartas „stiliaus“ savybės sintakses.
1 pavyzdys: naudokite ypatybę „style“, kad nustatytumėte konkretaus HTML elemento spalvą
Šiame pavyzdyje taikoma pagrindinė sintaksė stilius ypatybę, kad nustatytumėte „style“ ypatybės reikšmę taip, kad pasikeistų konkretaus HTML elemento spalva.
HTML kodas
Pirmiausia eikite per pateiktą HTML kodą:
< h2 > Naudokite „JavaScript“ stiliaus ypatybę h2 >
< h3 id = 'H3' > Antroji paantraštė. h3 >
Aukščiau pateiktose kodo eilutėse:
- „ ” HTML žyma nurodo pirmąją paantraštę.
- „ “ žyma sukuria antrąją 3 lygio paantraštę su priskirtu ID „H3“.
JavaScript kodas
Tada vadovaukitės nurodytu JavaScript kodu:
< scenarijus >dokumentas. getElementById ( 'H3' ) . stilius . spalva = 'žalias' ;
scenarijus >
Aukščiau pateiktame kodo fragmente „ document.getElementById() “ metodas pasiekia įtrauktą “ 'elementas per jo ID' H3 “ norėdami nustatyti nurodytą „ spalva ' elemento atributo vertė per ' stilius.spalva ' nuosavybė.
Išvestis
Išvestis rodo, kad tikslinio HTML elemento vaizdinis vaizdas yra atitinkamai nustatytas naudojant „style“ ypatybę.
2 pavyzdys: naudokite ypatybę „style“, kad gautumėte taikomo „stiliaus“ atributo vertę
Šiame pavyzdyje ypatybė „style“ padeda sužinoti priskirtą HTML elemento „style“ atributą naudojant jo apibendrintą sintaksę (Grąžinti stiliaus ypatybę).
HTML kodas
HTML kodas nurodytas čia:
< h2 > Naudokite „JavaScript“ stiliaus ypatybę h2 >< h3 id = 'H3' stilius = 'fono spalva: oranžinė;' > Antrosios paantraštės fono spalvos reikšmė yra : h3 >
< h4 id = 'demo' > h4 >
Šiame kode:
- „ ” HTML žyma naudoja atributą „style“, kuris nustato „
“ HTML elemento fono spalvą.
- „ ' žyma sukuria tuščią 4 lygio paantraštę su ID ' demo “.
JavaScript kodas
Dabar pažiūrėkite į pateiktą „JavaScript“ kodą:
< scenarijus >konst vertė = dokumentas. getElementById ( 'H3' ) . stilius . fono spalva ;
dokumentas. getElementById ( 'demo' ) . vidinis HTML = vertė ;
scenarijus >
Aukščiau parašytame kode:
- Kintamasis ' vertė “ deklaruojamas su „ konst “ raktinis žodis, kuris taiko „ document.getElementById() “ metodas, norint gauti elementą „
“, naudojant jo ID, norint gauti taikomo „style“ atributo vertę ir pritaikyti jį elementui, t. y. „
“ per „style“ ypatybę.
- Metodas „document.getElementById()“ vėl naudojamas norint pasiekti pridėtą tuščią „
“ elementą ir parodyti priskirto „style“ atributo reikšmę gautame HTML elemente ir pridėti jį kaip paantraštę per „ vidinis HTML ' nuosavybė.
Išvestis
Išvestis elementui pritaiko fono spalvą ir atitinkamai grąžinama nustatyto atributo „style“ reikšmė.
Išvada
„JavaScript“ naudoja „ stilius “ ypatybę, kad priskirtumėte ir grąžintumėte HTML DOM elemento eilutes „stiliaus“ ypatybes. Norint atitinkamai pritaikyti pageidaujamą funkciją, reikalinga papildoma „vertė“. Be nustatymo ir gavimo, taip pat naudinga pakeisti esamą „stiliaus“ atributą. Šiame vadove buvo parodytas pagrindinis HTML DOM elemento stiliaus ypatybės tikslas, veikimas ir praktinis įgyvendinimas.