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.
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
let dynamicImage = document.createElement('img');
dynamicImage.src = URL;
Exemple
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>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 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>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>
Grammaire
Let img = new Image(); img.src = URL;
Exemple
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>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 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>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!
Introduction aux caractéristiques de l'espace virtuel
Utilisation de la valeur de retour Python
Comment utiliser la monnaie numérique
Que dois-je faire si des lettres anglaises apparaissent lorsque l'ordinateur est allumé et que l'ordinateur ne peut pas être allumé ?
La différence entre vue2.0 et 3.0
Comment changer de ville sur Douyin
pas de solution de fichier de ce type
Comment configurer la passerelle par défaut
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
