interface Web
js tutoriel
Comment créer dynamiquement des éléments d'image en utilisant JavaScript ?
Comment créer dynamiquement des éléments d'image en utilisant JavaScript ?
En HTML, l'élément image est utilisé pour afficher des images sur une page Web. Obtenez plusieurs attributs en fonction des exigences, tels que « src », « alttext », « hauteur », « largeur », etc.
Dans certains cas, nous devons ajouter dynamiquement des images à la page Web. Par exemple, nous stockons une quantité inconnue de données cinématographiques dans une base de données. Nous devons obtenir des données de film et afficher des images de film ainsi que des détails sur chaque film. Dans ce cas, nous devons utiliser JavaScript pour ajouter l'image et les données au DOM.
Ensuite, nous apprendrons à utiliser JavaScript pour ajouter des éléments d'image aux pages Web.
Utilisez la méthode Document.createElement()
La méthode document.createElement() crée n'importe quel élément HTML à l'aide de JavaScript. Il prend le nom de la balise en paramètre et renvoie l'élément HTML.Après avoir créé l'élément HTML en JavaScript, nous pouvons modifier ses différents attributs et l'ajouter au DOM pour afficher l'image sur la page Web.
Grammaire
Les utilisateurs peuvent utiliser la méthode document.createElement() pour créer dynamiquement des éléments d'image selon la syntaxe suivante.
let dynamicImage = document.createElement('img');
dynamicImage.src = URL;
Exemple
Dans l'exemple ci-dessous, nous créons d'abord l'élément image. Après cela, nous mettons à jour son attribut "src" avec l'URL de l'image que nous souhaitons afficher sur la page Web.
Ensuite, nous accédons à l'élément div prédéfini à partir du DOM en utilisant son identifiant et ajoutons l'image nouvellement créée en tant qu'enfant de l'élément div à l'aide de la méthode appendChild().
Dans la sortie, l'utilisateur peut constater que l'image est ajoutée à l'aide de JavaScript.
<html>
<body>
<h3 id="Using-the-i-document-createElement-method-i-to-Create-image-element-dynamically-using-JavaScript">Using the <i> document.createElement() method </i> to Create image element dynamically using JavaScript </h3>
<div id = "img"> </div>
<script>
let img = document.getElementById('img');
// Create image element
let dynamicImage = document.createElement('img');
// Initialize the image source
dynamicImage.src = "https://www.tutorialspoint.com/static/images/logo.png";
// Add image to DOM
img.appendChild(dynamicImage);
</script>
</body>
</html>
Dans l'exemple ci-dessous, nous créons des boutons. Chaque fois que l'utilisateur clique sur le bouton, il exécute la fonction createImage().
Dans la fonction createImage(), nous utilisons la méthode createElement() pour créer un nouvel élément d'image et mettre à jour la valeur de son attribut "src". De plus, nous utilisons la méthode setAttribute() pour définir l'identifiant, la hauteur et la largeur de l'image.
Dans la sortie, l'utilisateur peut cliquer sur le bouton pour afficher l'image au format 200 x 200. Cependant, l'utilisateur peut modifier les dimensions dans le code et exécuter le code pour observer le résultat.
<html>
<body>
<h3 id="Using-the-i-document-createElement-method-i-to-Create-image-element-dynamically-using-JavaScript">Using the <i> document.createElement() method </i> to Create image element dynamically using JavaScript </h3>
<div id = "img"> </div>
<button id = "addImage" onclick = "createImage()"> Create Image </button>
<script>
function createImage() {
let img = document.getElementById('img');
let newImage = document.createElement('img');
newImage.src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png";
// Set attribute values for the image
newImage.setAttribute('id', 'myImage');
newImage.setAttribute('width', '200px');
newImage.setAttribute('height', '200px');
img.appendChild(newImage);
}
</script>
</body>
</html>
image() est un constructeur utilisé pour créer des instances d'éléments d'image en JavaScript. Nous créons une instance de l'image en JavaScript en utilisant le constructeur avec le mot-clé "new" et l'attachons à l'objet DOM.
Grammaire
Les utilisateurs peuvent créer des images via JavaScript à l'aide du constructeur Image() selon la syntaxe suivante.
Let img = new Image(); img.src = URL;
Exemple
Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton, il exécute la fonction createImage() pour l'ajouter dynamiquement au DOM.
Dans la fonction createImage(), nous initialisons l'instance d'image à l'aide du constructeur Image() puis mettons à jour la valeur de son attribut src. De plus, nous définissons la largeur et la hauteur de l'image en mettant à jour les valeurs des attributs et en l'attachant en tant qu'enfant de l'élément div.
<html>
<body>
<h3 id="Using-the-i-Image-constructor-i-to-Create-image-element-dynamically-using-JavaScript">Using the <i> Image() constructor </i> to Create image element dynamically using JavaScript</h3>
<div id = "img"> </div>
<button id = "addImage" onclick = "createImage()"> Create Image </button>
<script>
function createImage() {
let img = document.getElementById('img');
let devImage = new Image();
devImage.src = "https://www.tutorialspoint.com/static/images/development.svg";
devImage.setAttribute('width', '300px');
devImage.setAttribute('height', '300px');
img.appendChild(devImage);
}
</script>
</body>
</html>
Dans l'exemple ci-dessous, nous utilisons JavaScript pour joindre plusieurs images à une page Web.
Dans la fonction addMultiple(), nous avons un tableau d'URL d'images. Nous parcourons le tableau et à chaque itération créons un nouvel élément d'image, mettons à jour l'attribut src avec l'URL source donnée et l'ajoutons au DOM.
Dans la sortie, l'utilisateur peut cliquer sur le bouton pour voir cinq images dynamiques sur la page Web. De plus, l'image change chaque fois que l'utilisateur clique sur le bouton.
<html>
<body>
<h3 id="Using-the-i-Image-constructor-i-to-Create-image-element-dynamically-using-JavaScript">Using the <i> Image() constructor </i> to Create image element dynamically using JavaScript</h3>
<div id = "img"> </div>
<br> <br>
<button id = "addImage" onclick = "AddMultiple()"> Add Multiple Images </button>
<script>
function AddMultiple() {
let img = document.getElementById('img');
let imageURLS = [
"https://picsum.photos/200/300",
"https://picsum.photos/200/300/?blur",
"https://picsum.photos/200/300.webp",
"https://picsum.photos/200",
"https://picsum.photos/200/300"
]
// Fetch random images and append to the DOM
for (let i = 0; i < 5; i++) {
let randomImage = new Image();
randomImage.src = imageURLS[i];
randomImage.alt = "Random Image";
randomImage.width = 100;
randomImage.height = 100;
// Add right and left margin to the image
randomImage.style.marginRight = "10px";
randomImage.style.marginLeft = "10px";
img.appendChild(randomImage);
}
}
</script>
</body>
</html>
De plus, comme dans l'exemple précédent, nous pouvons obtenir un tableau d'URL d'images lors du développement en temps réel et devoir ajouter plusieurs images dynamiques à la page Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi
jQuery Vérifiez si la date est valide
Mar 01, 2025 am 08:51 AM
Des fonctions JavaScript simples sont utilisées pour vérifier si une date est valide. fonction isValidDate (s) { var bits = s.split ('/'); var d = new Date (bits [2] '/' bits [1] '/' bits [0]); return !! (d && (d.getMonth () 1) == bits [1] && d.getDate () == Number (bits [0])); } //test var
jQuery obtient un rembourrage / marge d'élément
Mar 01, 2025 am 08:53 AM
Cet article explique comment utiliser jQuery pour obtenir et définir les valeurs de marge et de marge intérieures des éléments DOM, en particulier les emplacements spécifiques de la marge extérieure et des marges intérieures de l'élément. Bien qu'il soit possible de définir les marges intérieures et extérieures d'un élément à l'aide de CSS, l'obtention de valeurs précises peut être délicate. // installation $ ("div.header"). CSS ("marge", "10px"); $ ("div.header"). css ("padding", "10px"); Vous pourriez penser que ce code est
10 onglets jQuery Accordion
Mar 01, 2025 am 01:34 AM
Cet article explore dix onglets jQuery exceptionnels et accordéons. La principale différence entre les onglets et les accordéons réside dans la façon dont leurs panneaux de contenu sont affichés et cachés. Plongeons ces dix exemples. Articles connexes: 10 plugins de l'onglet jQuery
10 vaut la peine de vérifier les plugins jQuery
Mar 01, 2025 am 01:29 AM
Découvrez dix plugins jQuery exceptionnels pour élever le dynamisme et l'attrait visuel de votre site Web! Cette collection organisée offre diverses fonctionnalités, de l'animation d'image aux galeries interactives. Explorons ces outils puissants: Related Posts: 1
Http débogage avec le nœud et le http-console
Mar 01, 2025 am 01:37 AM
HTTP-Console est un module de nœud qui vous donne une interface de ligne de commande pour exécuter les commandes HTTP. C'est idéal pour le débogage et voir exactement ce qui se passe avec vos demandes HTTP, qu'elles soient faites contre un serveur Web, Web Serv
Tutoriel de configuration de l'API de recherche Google personnalisé
Mar 04, 2025 am 01:06 AM
Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y
jQuery Ajouter une barre de défilement à div
Mar 01, 2025 am 01:30 AM
L'extrait de code jQuery suivant peut être utilisé pour ajouter des barres de défilement lorsque le contenu DIV dépasse la zone de l'élément de conteneur. (Pas de démonstration, veuillez le copier directement sur Firebug) // d = document // w = fenêtre // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ('# c
