Kā mainīt fona attēlu JavaScript

Ka Mainit Fona Attelu Javascript



Programmā JavaScript ir tīmekļa lapas, kurām nepieciešams pievilcīgs izkārtojums, piemēram, tumšs fons, kas parasti labāk darbojas saskarnēs. Tāpat balts fons ļauj lasītājiem koncentrēties uz saturu, un tāpēc ziņu portāli vai emuāri izmanto salīdzinoši gaišu fonu ar tumšu tekstu. Šādos gadījumos JavaScript kļūst ļoti parocīgs, formatējot un uzlabojot dokumentu noformējumu.

Šajā rakstā tiks apspriestas metodes, kā mainīt fona attēlu JavaScript.







Kā mainīt fona attēlu JavaScript?

Lai mainītu fona attēlu JavaScript, var izmantot šādas pieejas:



  • ' fona attēls ' īpašums uz ' DOM ”.
  • ' getElementById() ' metode un ' fona attēls ' īpašums uz ' paragrāfs ”.



Izlasi apspriestās metodes pa vienai!





1. metode. Mainiet fona attēlu programmā JavaScript, izmantojot DOM rekvizītu backgroundImage.

' fona attēls ” rekvizīts pielāgo norādītā elementa fona attēlu. Šo paņēmienu var izmantot, izmantojot rekvizītu backgroundImage un norādot fona attēlu, kā argumentu nosakot tā ceļu.

Sintakse



Iepriekš minētajā sintaksē ' URL ” attiecas uz attēla ceļu.

Demonstrēšanai skatiet tālāk redzamo piemēru.

Piemērs

Šajā piemērā tiks iekļauta poga ar norādīto vērtību un ' onclick ” notikums, kas novirza uz a
funkcija ar nosaukumu backgroundImage():

Tagad funkcija ' fona attēls() ' tiks deklarēts un ' document.body.style.backgroundImage ” rekvizīts piekļūs fona attēlam, izmantojot argumentā norādīto attēla ceļu:

Iepriekš minētās ieviešanas rezultāts būs šāds:

2. metode. Mainiet fona attēlu JavaScript, izmantojot metodi getElementById() un rekvizītu backgroundImage rindkopā

' getElementById() metode atgriež elementu ar noteiktu vērtību un ' fona attēls ” rekvizīts, kā minēts iepriekš, atgriež tā argumentā norādītā konkrētā elementa fona attēlu. Šo metodi var izmantot, lai kartētu norādīto krāsu uz konkrētās rindkopas fona.

Sintakse

Šeit, ' elementi ” attiecas uz elementa ID.

Izlasiet šo piemēru, lai labāk izprastu norādīto jēdzienu.

Piemērs

Vispirms iekļaujiet rindkopu tagā

un piešķiriet tai noteiktu ID:

Pēc tam izveidojiet pogu ar onclick notikumu, kas piekļūst funkcijai backgroundImage(), kā aprakstīts iepriekšējā metodē:

Visbeidzot deklarējiet funkciju ar nosaukumu ' fona attēls() ” līdzīgi. Šeit piekļūstiet definētajam ID, izmantojot “ getElementById() ” metodi un uzklājiet tai norādīto fona attēlu. Tā rezultātā rindkopas fonā tiks izmantota krāsa:

Izvade

Mēs esam apkopojuši vienkāršāko metodi fona attēla maiņai Javascript

Secinājums

Lai mainītu fona attēlu Javascript, izmantojiet ' fona attēls ' īpašums uz ' DOM ', lai lietotu norādīto fona attēlu visā tīmekļa lapā, izmantojot funkciju vai iegūstot konkrēto ID, izmantojot  ' getElementById() ” metodi un pielietošanu fona attēls ' īpašums uz norādīto ' paragrāfs ”. Šis emuārs ilustrē metodes, kā mainīt fona attēlus JavaScript.