Šajā rokasgrāmatā ir aprakstīts JavaScript HTML DOM elementa “style” rekvizīta mērķis un darbība.
Kā JavaScript darbojas HTML DOM elementa “stila” rekvizīts?
HTML DOM ' stils ” ir tikai lasāms rekvizīts, kas darbojas atbilstoši piešķirtajiem stila rekvizītiem. Tas arī atgriež ' CSSStyleDeclaration ” objekts, kurā ir visi konkrētā HTML elementa iekļautie stila atribūti.
Piezīme: Objektā “CSSStyleDeclaration” ir ietverti CSS stila atribūti, kas definēti galvas sadaļā.
Sintakse (iestatiet stila rekvizītu)
elements. stils . īpašums = vērtībuSaskaņā ar iepriekš minēto sintaksi “ stils 'īpašums atbalsta tikai vienu parametru' vērtību ”, kas apzīmē norādītā stila rekvizīta vērtību.
Sintakse (stila rekvizīta atgriešana)
elements. stils . īpašumsIeviesīsim praktiski iepriekš aplūkotās īpašības “style” sintakses.
1. piemērs. Izmantojiet rekvizītu “style”, lai iestatītu konkrēta HTML elementa krāsu
Šis piemērs piemēro pamata sintakse stils ” rekvizītu, lai iestatītu rekvizīta “style” vērtību tā, lai tiktu mainīta konkrētā HTML elementa krāsa.
HTML kods
Vispirms izlasiet norādīto HTML kodu:
< h2 > Izmantojiet stilu Property programmā JavaScript h2 >
< h3 id = 'H3' > Otrais apakšvirsraksts. h3 >
Iepriekš minētajās koda rindās:
- ' ” HTML tags norāda pirmo apakšvirsrakstu.
- ' ” tags izveido otro 3. līmeņa apakšvirsrakstu ar piešķirtu ID “H3”.
JavaScript kods
Pēc tam izpildiet norādīto JavaScript kodu:
< skripts >dokumentu. getElementById ( 'H3' ) . stils . krāsa = 'zaļš' ;
skripts >
Iepriekš minētajā koda fragmentā ' document.getElementById() ' metode piekļūst iekļautajam ' 'elements, izmantojot tā ID' H3 ”, lai iestatītu norādīto krāsa ' elementa atribūta vērtība, izmantojot ' stils.krāsa ” īpašums.
Izvade
Izvade parāda, ka mērķa HTML elementa vizuālais attēlojums ir attiecīgi iestatīts, izmantojot rekvizītu “style”.
2. piemērs. Izmantojiet rekvizītu “style”, lai iegūtu lietotā atribūta “style” vērtību
Šajā piemērā rekvizīts “style” palīdz noskaidrot HTML elementam piešķirto “style” atribūtu, izmantojot tā vispārināto sintaksi (Atgriezt stila rekvizītu).
HTML kods
HTML kods ir norādīts šeit:
< h2 > Izmantojiet stilu Property programmā JavaScript h2 >< h3 id = 'H3' stils = 'fona krāsa: oranža;' > Otrā apakšvirsraksta fona krāsas vērtība ir : h3 >
< h4 id = 'demo' > h4 >
Šajā kodā:
- ' ” HTML tags izmanto atribūtu “style”, kas nosaka HTML elementa “
” fona krāsu.
- ' tags izveido tukšu 4. līmeņa apakšvirsrakstu ar ID demo ”.
JavaScript kods
Tagad apskatiet doto JavaScript kodu:
< skripts >konst vērtību = dokumentu. getElementById ( 'H3' ) . stils . fona krāsa ;
dokumentu. getElementById ( 'demo' ) . innerHTML = vērtību ;
skripts >
Iepriekš rakstītajā kodā:
- Mainīgais ' vērtību ” ir deklarēts ar „ konst ' atslēgvārds, kas attiecas uz ' document.getElementById() ” metodi, lai iegūtu elementu “
”, izmantojot tā ID, lai iegūtu lietotā “style” atribūta vērtību un lietotu to elementam, t.i., “
”, izmantojot rekvizītu “style”.
- Metode “document.getElementById()” tiek izmantota vēlreiz, lai piekļūtu pievienotajam tukšajam elementam “
” un parādītu piešķirtā “style” atribūta vērtību pret ienesto HTML elementu un pievienotu to kā apakšvirsrakstu, izmantojot “ innerHTML ” īpašums.
Izvade
Izvade elementam piemēro fona krāsu, un attiecīgi tiek atgriezta arī iestatītā atribūta “style” vērtība.
Secinājums
JavaScript izmanto ' stils ” rekvizītu, lai piešķirtu un atgrieztu HTML DOM elementa iekļautos “style” rekvizītus. Lai atbilstoši lietotu vēlamo funkcionalitāti, ir nepieciešama papildu “vērtība”. Papildus iestatīšanai un izguvei ir arī izdevīgi mainīt esošo “style” atribūtu. Šajā rokasgrāmatā tika parādīts HTML DOM elementa stila rekvizīta galvenais mērķis, darbība un praktiskā ieviešana.