在JavaScript中，改变HTML图像（<img>元素）通常涉及到更改其src属性。以下是如何通过JavaScript来修改图像的一些常见方法和示例：
1. 修改 src 属性
最常见的方法是修改图像元素的 src 属性来改变显示的图像。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image Source</title>
</head>
<body>
<img id="myImage" src="old-image.jpg" alt="Old Image" width="300">
<button id="changeImageBtn">Change Image</button>
<script>
document.getElementById('changeImageBtn').addEventListener('click', () => {
document.getElementById('myImage').src = 'new-image.jpg';
});
</script>
</body>
</html>
2. 修改 alt 属性
可以通过JavaScript修改图像的 alt 属性，以改变图像加载失败时显示的替代文本。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Alt Text</title>
</head>
<body>
<img id="myImage" src="image.jpg" alt="Original Alt Text" width="300">
<button id="changeAltTextBtn">Change Alt Text</button>
<script>
document.getElementById('changeAltTextBtn').addEventListener('click', () => {
document.getElementById('myImage').alt = 'New Alt Text';
});
</script>
</body>
</html>
3. 修改图像尺寸
可以通过JavaScript修改图像的宽度和高度属性。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image Size</title>
</head>
<body>
<img id="myImage" src="image.jpg" alt="Sample Image" width="300" height="200">
<button id="changeSizeBtn">Change Size</button>
<script>
document.getElementById('changeSizeBtn').addEventListener('click', () => {
const img = document.getElementById('myImage');
img.width = 500; // New width
img.height = 400; // New height
});
</script>
</body>
</html>
4. 使用 CSS 类改变样式
可以通过添加或修改CSS类来改变图像的样式，例如使用滤镜、边框等。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image Style</title>
<style>
.normal {
border: 2px solid black;
}
.styled {
border: 5px dashed red;
filter: grayscale(100%);
}
</style>
</head>
<body>
<img id="myImage" src="image.jpg" alt="Sample Image" class="normal" width="300">
<button id="changeStyleBtn">Change Style</button>
<script>
document.getElementById('changeStyleBtn').addEventListener('click', () => {
const img = document.getElementById('myImage');
img.classList.toggle('styled');
img.classList.toggle('normal');
});
</script>
</body>
</html>
5. 动态创建图像
可以通过JavaScript动态创建图像元素并将其添加到文档中。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Image Dynamically</title>
</head>
<body>
<div id="imageContainer"></div>
<button id="addImageBtn">Add Image</button>
<script>
document.getElementById('addImageBtn').addEventListener('click', () => {
const container = document.getElementById('imageContainer');
const newImage = document.createElement('img');
newImage.src = 'new-image.jpg';
newImage.alt = 'Dynamically Added Image';
newImage.width = 300;
container.appendChild(newImage);
});
</script>
</body>
</html>
总结
这些示例展示了如何使用JavaScript来操作和修改HTML图像，包括更改图像源、样式和尺寸，以及动态创建和插入图像元素。