元素
概述
<img>
元素用于插入图片,主要继承了 HTMLImageElement 接口。
浏览器提供一个原生构造函数Image
,用于生成HTMLImageElement
实例。
1 | var img = new Image(); |
Image
构造函数可以接受两个整数作为参数,分别表示<img>
元素的宽度和高度。
1 | // 语法 |
<img>
实例的src
属性可以定义图像的网址。
1 | var img = new Image(); |
新生成的<img>
实例并不属于文档的一部分。如果想让它显示在文档中,必须手动插入文档。
1 | var img = new Image(); |
除了使用Image
构造,下面的方法也可以得到HTMLImageElement
实例。
document.images
的成员- 节点选取方法(比如
document.getElementById
)得到的<img>
节点 document.createElement('img')
生成的<img>
节点
1 | document.images[0] instanceof HTMLImageElement |
HTMLImageElement
实例除了具有 Node、Element、HTMLElement 接口以外,还拥有一些独有的属性。这个接口没有定义自己的方法。
特性相关的属性
(1)HTMLImageElement.src
HTMLImageElement.src
属性返回图像的完整网址。
1 | // HTML 代码如下 |
(2)HTMLImageElement.currentSrc
HTMLImageElement.currentSrc
属性返回当前正在展示的图像的网址。JavaScript 和 CSS 的 mediaQuery 都可能改变正在展示的图像。
(3)HTMLImageElement.alt
HTMLImageElement.alt
属性可以读写<img>
的 HTML 属性alt
,表示对图片的文字说明。
(4)HTMLImageElement.isMap,HTMLImageElement.useMap
HTMLImageElement.isMap
属性对应<img>
元素的 HTML 属性ismap
,返回一个布尔值,表示图像是否为服务器端的图像映射的一部分。
HTMLImageElement.useMap
属性对应<img>
元素的 HTML 属性usemap
,表示当前图像对应的<map>
元素。
(5)HTMLImageElement.srcset,HTMLImageElement.sizes
HTMLImageElement.srcset
属性和HTMLImageElement.sizes
属性,分别用于读写<img>
元素的srcset
属性和sizes
属性。它们用于<img>
元素的响应式加载。srcset
属性可以单独使用,但是sizes
属性必须与srcset
属性同时使用。
1 | // HTML 代码如下 |
上面代码中,sizes
属性指定,对于小于320px
的屏幕,图像的宽度为280px
;对于小于480px
的屏幕,图像宽度为440px
;其他情况下,图像宽度为800px
。然后,浏览器会根据当前屏幕下的图像宽度,到srcset
属性加载宽度最接近的图像。
HTMLImageElement.width,HTMLImageElement.height
width
属性表示<img>
的 HTML 宽度,height
属性表示高度。这两个属性返回的都是整数。
1 | // HTML 代码如下 |
如果图像还没有加载,这两个属性返回的都是0
。
如果 HTML 代码没有设置width
和height
属性,则它们返回的是图像的实际宽度和高度,即HTMLImageElement.naturalWidth
属性和HTMLImageElement.naturalHeight
属性。
HTMLImageElement.naturalWidth,HTMLImageElement.naturalHeight
HTMLImageElement.naturalWidth
属性表示图像的实际宽度(单位像素),HTMLImageElement.naturalHeight
属性表示实际高度。这两个属性返回的都是整数。
如果图像还没有指定或不可得,这两个属性都等于0
。
1 | var img = document.getElementById('img'); |
上面代码中,如果图片的高度大于宽度,则设为portrait
模式。
HTMLImageElement.complete
HTMLImageElement.complete
属性返回一个布尔值,表示图表是否已经加载完成。如果<img>
元素没有src
属性,也会返回true
。
HTMLImageElement.crossOrigin
HTMLImageElement.crossOrigin
属性用于读写<img>
元素的crossorigin
属性,表示跨域设置。
这个属性有两个可能的值。
anonymous
:跨域请求不要求用户身份(credentials),这是默认值。use-credentials
:跨域请求要求用户身份。
1 | // HTML 代码如下 |
HTMLImageElement.referrerPolicy
HTMLImageElement.referrerPolicy
用来读写<img>
元素的 HTML 属性referrerpolicy
,表示请求图像资源时,如何处理 HTTP 请求的referrer
字段。
它有五个可能的值。
no-referrer
:不带有referrer
字段。no-referrer-when-downgrade
:如果请求的地址不是 HTTPS 协议,就不带有referrer
字段,这是默认值。origin
:referrer
字段是当前网页的地址,包含协议、域名和端口。origin-when-cross-origin
:如果请求的地址与当前网页是同源关系,那么referrer
字段将带有完整路径,否则将只包含协议、域名和端口。unsafe-url
:referrer
字段包含当前网页的地址,除了协议、域名和端口以外,还包括路径。这个设置是不安全的,因为会泄漏路径信息。
HTMLImageElement.x,HTMLImageElement.y
HTMLImageElement.x
属性返回图像左上角相对于页面左上角的横坐标,HTMLImageElement.y
属性返回纵坐标。
事件属性
图像加载完成,会触发onload
属性指定的回调函数。
1 | // HTML 代码为 <img src="example.jpg" onload="loadImage()"> |
图像加载过程中发生错误,会触发onerror
属性指定的回调函数。
1 | // HTML 代码为 <img src="image.gif" onerror="myFunction()"> |
本教程来自“网道项目”(wangdoc.com),采用知识共享 署名-相同方式共享 3.0协议。
0评论