A JavaScript, hi ha pàgines web que necessiten un disseny atractiu, com ara fons foscos que solen funcionar millor per a interfícies. De la mateixa manera, els fons blancs permeten als lectors centrar-se en el contingut, de manera que els portals de notícies o blocs utilitzen un fons relativament clar amb text fosc. En aquests casos, JavaScript esdevé molt útil per donar format i millorar el disseny de documents.
Aquest article tractarà els mètodes per canviar la imatge de fons a JavaScript.
Com canviar la imatge de fons en JavaScript?
Per canviar la imatge de fons en JavaScript, es poden utilitzar els enfocaments següents:
- “ imatge de fons 'propietat a' DOM ”.
- “ getElementById() mètode ' i ' imatge de fons 'propietat a' paràgraf ”.
Revisa els mètodes comentats un per un!
Mètode 1: Canvia la imatge de fons a JavaScript utilitzant la propietat backgroundImage al DOM.
El ' imatge de fons ” La propietat ajusta la imatge de fons de l'element especificat. Aquesta tècnica es pot aplicar aplicant la propietat backgroundImage i especificant la imatge de fons localitzant el seu camí com a argument.
Sintaxi
En la sintaxi anterior, ' URL ” fa referència al camí de la imatge.
Mireu l'exemple següent per a la demostració.
Exemple
En aquest exemple, s'inclourà un botó amb el valor especificat i un ' fent clic ” esdeveniment que redirigeix a a
funció anomenada backgroundImage():
Ara, una funció ' imatge de fons() ' es declararà i el ' document.body.style.backgroundImage ” la propietat accedirà a la imatge de fons mitjançant la ruta d'imatge especificada al seu argument:
El resultat de la implementació anterior serà el següent:
Mètode 2: Canvieu la imatge de fons a JavaScript utilitzant el mètode getElementById() i la propietat backgroundImage al paràgraf
El ' getElementById() ” retorna un element amb un valor especificat i el “ imatge de fons ”, com s'ha dit anteriorment, retorna la imatge de fons de l'element concret especificat al seu argument. Aquest mètode es pot aplicar per mapejar el color especificat al fons del paràgraf concret.
Sintaxi
Aquí, ' elements ” es refereix a l'identificador d'un element.
Seguiu l'exemple següent per entendre millor el concepte indicat.
Exemple
Primer, incloeu un paràgraf a l'etiqueta
i assigneu-li un identificador específic:
A continuació, creeu un botó amb un esdeveniment onclick per accedir a la funció backgroundImage() tal com es va comentar al mètode anterior:
Finalment, declara la funció anomenada ' imatge de fons() ” de la mateixa manera. Aquí, accediu a l'identificador definit mitjançant el ' getElementById() ” i apliqueu-hi la imatge de fons especificada. Això donarà lloc a la implementació del color al fons del paràgraf:
Sortida
Hem compilat el mètode més fàcil per canviar la imatge de fons en Javascript
Conclusió
Per canviar la imatge de fons en Javascript, apliqueu el ' imatge de fons 'propietat a' DOM ' per aplicar la imatge de fons especificada a tota la pàgina web mitjançant una funció o per obtenir l'identificador concret mitjançant ' getElementById() 'Mètode i aplicació' imatge de fons 'propietat a l'especificat' paràgraf ”. Aquest bloc il·lustra els mètodes per canviar les imatges de fons en JavaScript.