JavaScript是一種常用的網頁編程語言，在網頁中，常常需要對圖片進行修改。今天，我們就來學習如何使用JavaScript來修改圖片。 在HTML中，我們使用標簽來引用圖片。我們可以使用JavaScript來獲取這個元素，然后修改它的屬性，以達到修改圖片的目的。比如，我們可以通過以下代碼來改變圖片的寬度和高度：

var img = document.getElementsByTagName("img")[0];
img.width = "500";
img.height = "300";

這里的代碼獲取了頁面中第一個元素，并將它的寬度修改為500像素，高度修改為300像素。 除了修改寬度和高度，我們還可以修改圖片的src屬性，從而更換圖片。比如，以下代碼通過點擊按鈕來更換圖片：

<button onclick="changeImg()">換一張圖片</button>
<img id="myImg" src="image1.jpg" width="500" height="300">
<script>
function changeImg() {
var img = document.getElementById("myImg");
img.src = "image2.jpg";
}
</script>

這里的代碼中有一個按鈕，當點擊按鈕時就會觸發changeImg()函數。這個函數獲取了id為myImg的元素，并將它的src屬性修改為image2.jpg，從而實現了更換圖片的效果。 除了更換圖片，我們還可以通過JavaScript來實現動態修改圖片。比如，在用戶鼠標懸停在圖片上時，圖片會放大；鼠標移開時，圖片會恢復原本大小。以下是實現這個效果的代碼：

<img src="image.jpg" onmouseover="enlargeImg()" onmouseout="restoreImg()">
<script>
function enlargeImg() {
var img = document.getElementsByTagName("img")[0];
img.style.width = "600px";
img.style.height = "400px";
}
function restoreImg() {
var img = document.getElementsByTagName("img")[0];
img.style.width = "300px";
img.style.height = "200px";
}
</script>

這里的代碼中，我們在標簽中使用了onmouseover和onmouseout事件，在鼠標懸停在圖片上和移開時分別觸發了enlargeImg()和restoreImg()函數。這兩個函數分別將圖片的寬度和高度修改為不同的值，從而實現了放大和還原的效果。 總結起來，JavaScript可以方便地修改元素的屬性，從而實現圖片的更換、放大、縮小等效果。無論是靜態頁面還是動態頁面，都可以通過JavaScript來優化圖片的顯示效果，提升用戶的使用體驗。