以下是一个简单的例子,演示如何使用 JavaScript 操控 <img> 元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Element Example</title>
</head>
<body>
<img id="myImage" src="example.jpg" alt="Example Image" width="300" height="200">
<button onclick="changeImage()">Change Image</button>
<script>
// 获取 img 元素
var imageElement = document.getElementById('myImage');
// 定义改变图像源的函数
function changeImage() {
imageElement.src = 'new_example.jpg';
imageElement.alt = 'New Example Image';
}
</script>
</body>
</html>
在这个例子中,我们首先通过 getElementById 获取了一个具有特定 id("myImage")的 <img> 元素。然后,通过修改其 src 和 alt 属性来改变图像的源文件和替代文本。我们提供了一个按钮,点击按钮时调用 changeImage 函数以改变图像。
通过 JavaScript 操控 <img> 元素,你可以动态地改变图像的属性、响应用户的交互事件,或者执行其他与图像相关的操作。
转载请注明出处:http://www.zyzy.cn/article/detail/6204/JavaScript 和 HTML DOM