Maison >interface Web >js tutoriel >Comment ajouter des images en JavaScript
Comment ajouter des images en JavaScript
- 醉折花枝作酒筹original
- 2021-07-22 11:41:2920409parcourir
Si vous souhaitez ajouter une image à l'aide de JavaScript, vous pouvez d'abord utiliser la méthode createElement() pour créer un élément img et attribuer la valeur de l'adresse URL de l'image à l'attribut src de l'élément img, puis utiliser appendChild() ; méthode pour ajouter l’élément img à l’objet dom spécifié.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
Si vous souhaitez ajouter une image à l'aide de JavaScript, vous pouvez d'abord utiliser la méthode createElement() pour créer un élément img et attribuer la valeur de l'adresse URL de l'image à l'attribut src de l'élément img, puis utiliser appendChild() ; méthode pour ajouter l’élément img à l’objet dom spécifié, c’est tout.
Méthode createElement()
La méthode createElement() crée un élément en spécifiant un nom
Syntaxe :
document.createElement(nodename)
Paramètres : nom de nœud : obligatoire. Créez le nom de l'élément.
Valeur de retour : nœud d'élément créé
Méthode getElementById()
La méthode getElementById() renvoie une référence au premier objet avec l'ID spécifié.
HTML DOM définit plusieurs méthodes pour rechercher des éléments, en plus de getElementById(), il existe également getElementsByName() et getElementsByTagName().
S'il n'y a aucun élément avec l'ID spécifié, renvoyez null
S'il y a plusieurs éléments avec l'ID spécifié, renvoyez undéfini.
Syntaxe : la méthode
document.getElementById(elementID)
appendChild()
la méthode appendChild() ajoute un nouveau nœud enfant à la fin de la liste des nœuds enfants du nœud.
Astuce : Si newchild existe déjà dans l'arborescence des documents, il sera supprimé de l'arborescence des documents et réinséré dans sa nouvelle position. Si newchild est un nœud DocumentFragment, il ne sera pas inséré directement, mais ses nœuds enfants seront insérés dans l'ordre à la fin du tableau childNodes[] du nœud actuel.
Vous pouvez utiliser la méthode appendChild() pour supprimer un élément d'un autre élément.
Syntaxe :
node.appendChild(node)
Paramètres : nœud : obligatoire. L'objet nœud que vous souhaitez ajouter.
Exemple : JavaScript pour ajouter des images aux éléments div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
var bigImg = document.createElement("img"); //创建一个img元素
bigImg.src = "logo.png"; //给img元素的src属性赋值
//bigImg.width="320"; //320个像素 不用加px
var myp = document.getElementById('myp'); //获得dom对象
myp.appendChild(bigImg); //为dom添加子元素img
};
</script>
</head>
<body>
<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
</body>
</html>[Apprentissage recommandé : Tutoriel avancé javascript]
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!