Cet article décrit le fonctionnement et l'utilisation de la propriété 'backgroundImage' du style HTML DOM.
Comment utiliser la propriété HTML DOM Style 'backgroundImage' en JavaScript ?
Le style HTML DOM ' image de fond ” La propriété permet de personnaliser l'élément HTML et le document en ajoutant une image de fond en se référant à son chemin.
Syntaxe (Définition de la propriété 'backgroundImage')
objet. style . image de fond = 'URL('URL')|aucune|initiale|hériter'La syntaxe ci-dessus prend en charge les valeurs de propriété 'backgroundImage' suivantes :
- URL(‘URL’): Il spécifie l'emplacement de l'image d'arrière-plan souhaitée.
- aucun: Il représente la valeur par défaut, c'est-à-dire aucune image d'arrière-plan.
- initial: Elle est similaire à la valeur par défaut du navigateur.
- hériter: Il hérite de la propriété de son élément parent.
Syntaxe (URL de retour de la propriété 'backgroundImage')
objet. style . image de fondCette syntaxe renvoie la valeur de chaîne contenant l'URL de l'image d'arrière-plan ajoutée.
Utilisons pratiquement les syntaxes définies ci-dessus pour expliquer l'utilisation de la propriété de style 'backgroundImage'.
Exemple 1 : Appliquer la propriété Style 'backgroundImage' pour définir l'image d'arrière-plan
Cet exemple applique le style ' image de fond ” propriété pour définir l'image d'arrière-plan souhaitée pour le document en spécifiant son URL.
Code HTML
Tout d'abord, jetez un œil au code HTML indiqué :
< h2 > Utiliser HTML DOM Style propriété backgroundImage en JavaScript h2 >
< bouton onclick = 'maFonction()' > Cliquez ici bouton >
Dans ce code :
- Le ' ” ajoute le sous-titre de niveau 2.
- Le '
” tag crée un bouton auquel est attaché un “ sur clic « événement pour exécuter la fonction » maFonction() ” lors du clic sur le bouton.
Code Javascript
Ensuite, suivez le code JavaScript donné :
< scénario >fonction maFonction ( ) {
document. corps . style . image de fond = 'url('./html&css/image.jpg')' ;
}
scénario >
Dans l'extrait de code ci-dessus :
- La fonction nommée ' maFonction() ' est défini.
- Dans sa définition, le « style.backgroundImage ” la propriété applique le spécifié “ URL ” image à l'arrière-plan de l'ensemble du document.
Sortir
La sortie montre que l'image d'arrière-plan est ajoutée à l'ensemble du document lors d'un clic sur le bouton.
Exemple 2 : appliquer la propriété de style 'backgroundImage' pour renvoyer l'URL de l'image d'arrière-plan
Le ' image de fond ” est également bénéfique pour renvoyer l'URL de l'image d'arrière-plan. Voyons cela concrètement.
Code HTML
Tout d'abord, parcourez le code HTML écrit :
< h2 > Utiliser HTML DOM Style propriété backgroundImage en JavaScript h2 >< identifiant div = 'maDiv' style = 'hauteur : 500 px ; largeur : 500 px ;
bordure : 3px noir solide;image d'arrière-plan:url('./html&css/image.jpg')' > Ce est un div div >
< identifiant h4 = 'démo' > h4 >
Dans le bloc de code ci-dessus :
- Le ' image de fond » est utilisée dans l'élément « » qui ajoute une image de fond correspondant à l'URL donnée.
- Le ' ” crée un sous-titre vide de niveau 4 qui affiche la valeur renvoyée (URL) de l'image d'arrière-plan ajoutée.
Code Javascript
Maintenant, passez au code JavaScript :
< scénario >
laissez img = document. getElementById ( 'maDiv' ) . style . image de fond ;
document. getElementById ( 'démo' ) . innerHTML = image ;
scénario >Dans ce bloc de code :
- Déclarez la variable ' image ' qui utilise le ' document.getElementById() » pour accéder à l'élément « » via son id « myDiv » et applique une image de fond via le « image de fond ' propriété.
- Ensuite, la méthode 'document.getElementById()' récupère le sous-titre vide en utilisant son identifiant 'demo' pour afficher l'URL de l'image d'arrière-plan ajoutée.
Sortir
La sortie affiche l'URL de l'image d'arrière-plan appliquée à l'élément « div ».
Conclusion
JavaScript utilise le style ' image de fond ” propriété permettant d'affecter l'image de fond à l'élément HTML souhaité ou de renvoyer son URL. Il prend en charge quatre valeurs de propriété pour définir l'image d'arrière-plan, y compris 'initial', 'hériter', 'URL' et 'aucun'. Cependant, il ne prend en charge aucune valeur pour obtenir l'URL de l'image d'arrière-plan. Cet article a fourni une brève description de l'utilisation de la propriété 'backgroundImage' de style HTML DOM en JavaScript.