Exemple de comment ajouter une image dans une page html en utilisant javascript
Ajouter une image avec javascript
On peut tout d'abord créer une variable image avec createElement("img"):
var img = document.createElement("img");
puis indiquer le nom de l'image (Note: si l'image n'est pas dans le même répertoire que le document html, on peut aussi specifier le chemin complet vers l'image par exemple './path_to_img/matplotlib-grid-02.png'):
img.src = "matplotlib-grid-02.png";
et enfin afficher l'image dans la page html
var block = document.getElementById("x");block.appendChild(img);
Exemple de code en utilisant cette image
<!DOCTYPE html><html lang="en"><head><title>Test Javascript</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><div id="x"></div><script>var img = document.createElement("img");img.src = "matplotlib-grid-02.png";var div = document.getElementById("x");div.appendChild(img);//block.setAttribute("style", "text-align:center");</script></body></html>
donne
Changer le style de l'élément div
On peut ensuite par exemple modifier le style de la dic contenant l'image avec
div.setAttribute("style", " ");
Code
<!DOCTYPE html><html lang="en"><head><title>Test Javascript</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><div id="x"></div><script>var img = document.createElement("img");img.src = "matplotlib-grid-02.png";var div = document.getElementById("x");div.appendChild(img);div.setAttribute("style", "text-align:center");</script></body></html>
donne
Changer le style de l'image
On peut aussi modifier le style de l'image avec
img.setAttribute("style", " ");
Exemple de code
<!DOCTYPE html><html lang="en"><head><title>Test Javascript</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><div id="x"></div><script>var img = document.createElement("img");img.src = "matplotlib-grid-02.png";img.setAttribute("style", "margin-top: 80px;");var div = document.getElementById("x");div.appendChild(img);div.setAttribute("style", "text-align:center");</script></body></html>
donne
Références
| Liens | Site |
|---|---|
| How do you insert an image in Javascript? | quora |
| Element.setAttribute() | developer.mozilla.org |
| How TO - Add a Class | stackoverflow |
| Add Style on image object using JavaScript in Canvas | stackoverflow |
| How to add styling (CSS) to img tags in Javascript/Jquery | stackoverflow |
| How to set style of image with html5? | stackoverflow |
