JavaScript image对象(image Object)

image对象代表了HTML文档中的img元素

如何访问image对象?

使用getElementById()访问image元素。

var  x = document.getElementById("myFrame");

如何创建image对象

使用createElement()方法创建image元素。

var x = document.createElement("img");
image对象的属性
属性 说明
align HTML5不支持该属性,使用style.cssFloat代替。
设置或返回image元素上的align属性的值
alt 设置或返回image元素上的alt属性的值
border HTML5不支持该属性,使用style.border代替。
设置或返回由image元素上的border属性
complete 返回浏览器是否下载完毕一个图像
crossOrigin【5】 设置或返回图像的CORS设置
height 设置或返回image元素上height属性的值
hspace HTML5不支持该属性,使用style.margin代替
设置或返回image元素上hspace属性的值
isMap 设置或返回图像是否应该是服务器端的图像映射的一部分
longDesc HTML5不支持该属性
设置或返回image元素上longDesc属性的值
name HTML5不支持该属性,使用id代替
设置或返回image元素上name属性的值
naturalHeight 返回图像的原始高度
naturalWidth 返回图像的原始高度
src 设置或返回img元素上的src属性的值
useMap 设置或返回img元素上的usemap属性的值
vspace HTML5不支持该属性,使用style.cssFloat代替。
设置或返回img元素上的vspace属性
src 设置或返回image元素上src属性的值
width 设置或返回img元素上的width属性的值

【5】=HTML5中新增加属性

标准属性及事件

image对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问img元素</h3>

<img id="myImg" src="../../images/flowerR.png" alt="" width="141" height="141">

<p>点击以下按钮,获取图像的URL</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myImg").src;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建img元素</h3>

<p>点击以下按钮,创建一个img元素</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.createElement("IMG");

x.setAttribute("src", "../../images/flowerR.png");

x.setAttribute("width", "141");

x.setAttribute("width", "141");

x.setAttribute("alt", "花");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容