在前端开发中，经常需要使用 JavaScript 动态改变图片的透明度。这篇文章将详细介绍如何使用 JavaScript 来实现这个功能，并提供示例代码以供参考。
HTML 与 CSS
首先，我们需要准备一张图片和一个 HTML 页面来显示这张图片。以下是一个简单的 HTML 页面的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----- ------- ----- ------------------
-------
--- -
------ ------
------- -----
-
--------
-------
------
---- ---------- ------------------
-------
-------这段 HTML 代码包含一张图片和一些基本的 CSS 样式，用于设置图片的宽度和高度。现在打开这个页面，你会看到一张带有默认透明度的图片。
JavaScript
下面我们将使用 JavaScript 来改变这张图片的透明度。我们可以使用 opacity 属性来控制图片的透明度，该属性的值从 0 到 1 变化，其中 0 表示完全透明，1 表示完全不透明。
我们可以使用以下代码来获取图片的引用并将其透明度设置为 0.5：
var myImg = document.getElementById("myImg");
myImg.style.opacity = "0.5";这段代码使用 document.getElementById() 方法获取了页面中 ID 为 "myImg" 的图片元素，并将其透明度设置为 0.5。现在打开页面，你会看到图片的透明度已经改变了。
动态改变透明度
我们可以将上述代码包装在一个函数中，使其更易于重用。以下是一个简单的函数，它接受两个参数：要改变透明度的图片的 ID 和要设置的透明度值。
function changeOpacity(id, opacity) {
var element = document.getElementById(id);
element.style.opacity = opacity;
}现在我们可以通过调用这个函数来动态地改变图片的透明度。例如，下面的代码将在 3 秒钟内将图片的透明度从 1 改变到 0：
setTimeout(function() {
for (var i = 10; i >= 0; i--) {
var opacity = i / 10;
changeOpacity("myImg", opacity);
}
}, 3000);这段代码使用了 setTimeout() 函数来设置一个定时器，在 3 秒钟后开始执行一段代码块。该代码块使用一个循环来改变透明度，每次透明度减小 0.1，直到达到 0。
结论
本文介绍了如何使用 JavaScript 来改变图片的透明度。我们学习了如何使用 opacity 属性来控制图片透明度，以及如何使用 JavaScript 来动态地改变透明度。通过这些知识，我们可以更好地控制网站中的图像，并增加用户的交互性。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----- ------- ----- ------------------
-------
--- -
------ ------
------- -----
-
--------
-------
------
---- ---------- ------------------
--------
-------- ----------------- -------- -
--- ------- - ----------------------------
--------------------- - --------
-
--------------------- -
--- ---- - - --- - -- -- ---- -
--- ------- - - - ---
---------------------- ---------
-
-- ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------