HTML DOM Image 对象
HTML DOM Image 对象
在HTML中,Image对象可以通过<img>
标签创建。此外,使用DOM API,我们可以动态地创建和修改图片对象,而不需要重新加载网页。HTML DOM Image对象代表了一个图片,我们可以使用它的属性和方法来访问和修改图片。
创建一个Image对象
我们可以使用Image()
构造函数来创建一个Image对象,并为src属性指定图片的路径:
var img = new Image();
img.src = './images/image.jpg';
也可以使用<img>
标签创建一个Image对象,并在HTML中显示:
<img src="./images/image.jpg" id="image" />
然后在JavaScript中,我们可以使用getElementById()
方法获取这个Image对象:
var img = document.getElementById('image');
Image对象的属性
Image对象有很多有用的属性,以下是一些常用的属性:
- alt: 获取或设置图片的替代文本
- complete: 如果图片已经加载完成,则返回true
- height: 获取或设置图片的高度
- naturalHeight: 获取图片的原始高度
- naturalWidth: 获取图片的原始宽度
- src: 获取或设置图片的URL
- width: 获取或设置图片的宽度
Image对象的方法
Image对象还有一些常用的方法,如下:
- decode(): 使用异步方式解码图片,但当图片已经加载过时,该方法将被忽略
- getAttribute(): 获取图片的属性值
- setAttribute(): 设置图片的属性值
示例
下面是一个使用Image对象的完整示例。我们将在页面中创建一个图像,然后动态地修改它的 src 属性,显示不同的图片:
<!DOCTYPE html>
<html>
<head>
<title>Image Object Example</title>
</head>
<body>
<div>
<img id="my-image" src="./images/image1.jpg" />
</div>
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
var img = document.getElementById("my-image");
img.src = "./images/image2.jpg";
}
</script>
</body>
</html>
结论
Image对象是HTML DOM API中的一个重要对象,它允许我们在网页中动态地创建、访问和修改图片。上述介绍的属性和方法只是其中一部分,更多关于Image对象的用法请参考官方文档。