以下是一些与 Image 对象相关的 DOM 操作：
属性：
1. src：
- 获取或设置图像的源 URL。
2. alt：
- 获取或设置图像的替代文本（用于在图像无法显示时显示的文本）。
3. width 和 height：
- 获取或设置图像的宽度和高度。
4. naturalWidth 和 naturalHeight：
- 获取图像的原始宽度和高度。
方法：
1. addEventListener(type, listener) 和 removeEventListener(type, listener)：
- 添加或移除事件监听器，允许在图像加载完成或加载失败时执行相应的操作。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Image Object Example</title>
</head>
<body>
<img id="myImage" src="example.jpg" alt="Example Image" width="300" height="200">
<script>
// 获取 Image 对象
var imageElement = document.getElementById("myImage");
// 获取和设置 src 属性
var srcValue = imageElement.src;
console.log("Source: " + srcValue);
// 获取和设置 alt 属性
var altText = imageElement.alt;
console.log("Alt text: " + altText);
// 获取和设置宽度和高度
var widthValue = imageElement.width;
var heightValue = imageElement.height;
console.log("Width: " + widthValue + ", Height: " + heightValue);
// 获取原始宽度和高度
var naturalWidth = imageElement.naturalWidth;
var naturalHeight = imageElement.naturalHeight;
console.log("Natural Width: " + naturalWidth + ", Natural Height: " + naturalHeight);
// 添加事件监听器
imageElement.addEventListener("load", function() {
console.log("Image loaded successfully");
});
imageElement.addEventListener("error", function() {
console.log("Image failed to load");
});
</script>
</body>
</html>
在上述示例中，我们使用 getElementById 获取了 <img> 元素，然后通过 src、alt、width、height、naturalWidth、naturalHeight 等属性获取了图像的相关信息。我们还添加了两个事件监听器，以便在图像加载成功或加载失败时记录到控制台。
转载请注明出处：http://www.zyzy.cn/article/detail/4389/HTML