HTML DOM 快速导览 – 元素对象 《img》 (HTMLImageElement)

最新推荐文章于 2023-12-16 14:23:15 发布
最新推荐文章于 2023-12-16 14:23:15 发布
阅读量5.6k 收藏 1
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoyf123321/article/details/50015717
版权
<img> 为 HTML 文件的内嵌元素 (embedded content) ， DOM 接口为 HTMLImageElement 。

取得 <img> 的元素对象 (object) 后，可存取元素的全局属性 (global attribute) 。 HTMLImageElement 另有定义属性

  • alt
  • src
  • crossOrigin
  • useMap
  • isMap
  • width
  • height
  • naturalWidth
  • naturalHeight
  • complete

alt 、
src 、
crossOrigin 、
useMap 、
isMap 、
width 、
height 对应到 <img> 相同名称的属性，
naturalWidth 与
naturalHeight 回传图档原始的宽与高，
complete 则回传完成状态。举例如下

function run() {
    var d = document.getElementsByTagName("img");
    var s = document.getElementById("show");
    s.innerHTML = d[0];
    d[0].width = "300";
}

/*
    檔名：htmldemo063.js
     功能：示范 JavaScript 程序

 时间：公元 2011 年 8 月 */

此例用 document 对象的 getElementsByTagName() 方法 (method) ，取得标签名称为 img 的 HTMLCollection 对象，文件的第一个 <img> 元素亦即该 HTMLCollection 索引值为 0 的对象

var d = document.getElementsByTagName("img");
var s = document.getElementById("show");
s.innerHTML = d[0];
d[0].width = "300";

然后在 id 属性 (attribute) 为 show 的元素中显示 d[0] ，并且将 width 属性更改为 "300" 。

我们以下面的 HTML 文件加载

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="htmldemo063.js" type="text/javascript"></script>
</head>
<body>
<div><img src="example.jpg"></div>
<input type="button" value="RUN" οnclick="run();">
<div>Result: <span id="show"></span></div>
</html>
中英文术语对照
内嵌元素embedded content
对象object
全局属性global attribute
方法method
属性attribute
浏览器broswer

您可以继续参考

HTML 5 范例

  • HTML 5 快速导览 – 内嵌元素 <img>

HTML 元素对象

  • 根元素
    • <html> (HTMLHtmlElement)
  • 文件数据元素
    • <head> (HTMLHeadElement)
    • <title> (HTMLTitleElement)
    • <base> (HTMLBaseElement)
    • <link> (HTMLLinkElement)
    • <meta> (HTMLMetaElement)
    • <style> (HTMLStyleElement)
    • <script> (HTMLScriptElement)
    • <noscript> (HTMLElement)
  • 文件区域元素
    • <body> (HTMLBodyElement)
    • <section> (HTMLElement)
    • <nav> (HTMLElement)
    • <article> (HTMLElement)
    • <aside> (HTMLElement)
    • <h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement)
    • <hgroup> (HTMLElement)
    • <header> (HTMLElement)
    • <footer> (HTMLElement)
    • <address> (HTMLElement)
  • 群组元素
    • <p> (HTMLParagraphElement)
    • <hr> (HTMLHRElement)
    • <pre> (HTMLPreElement)
    • <blockquote> (HTMLQuoteElement)
    • <ol> (HTMLOListElement)
    • <ul> (HTMLUListElement)
    • <li> (HTMLLIElement)
    • <dl> (HTMLDListElement)
    • <dt> (HTMLElement)
    • <dd> (HTMLElement)
    • <figure> (HTMLElement)
    • <figcaption> (HTMLElement)
    • <div> (HTMLDivElement)
  • 文字层级元素
    • <a> (HTMLAnchorElement)
    • <em> (HTMLElement)
    • <strong> (HTMLElement)
    • <small> (HTMLElement)
    • <s> (HTMLElement)
    • <cite> (HTMLElement)
    • <q> (HTMLQuoteElement)
    • <dfn> (HTMLElement)
    • <abbr> (HTMLElement)
    • <data> (HTMLDataElement)
    • <time> (HTMLTimeElement)
    • <code> (HTMLElement)
    • <var> (HTMLElement)
    • <samp> (HTMLElement)
    • <kbd> (HTMLElement)
    • <sub> (HTMLElement)
    • <sup> (HTMLElement)
    • <i> (HTMLElement)
    • <b> (HTMLElement)
    • <u> (HTMLElement)
    • <mark> (HTMLElement)
    • <ruby> (HTMLElement)
    • <rt> (HTMLElement)
    • <rp> (HTMLElement)
    • <bdi> (HTMLElement)
    • <bdo> (HTMLElement)
    • <span> (HTMLSpanElement)
    • <br / > (HTMLBRElement)
    • <wbr> (HTMLElement)
  • 编修记录元素
    • <ins> (HTMLModElement)
    • <del> (HTMLModElement)
  • 内嵌媒体元素
    • <img> (HTMLImageElement)
    • <iframe> (HTMLIFrameElement)
    • <embed> (HTMLEmbedElement)
    • <object> (HTMLObjectElement)
    • <param> (HTMLParamElement)
    • <video> (HTMLVideoElement)
    • <audio> (HTMLAudioElement)
    • <source> (HTMLSourceElement)
    • <track> (HTMLTrackElement)
    • <canvas> (HTMLCanvasElement)
      • CanvasRenderingContext2D
        • CanvasRenderingContext2D.canvas
        • CanvasRenderingContext2D.save()
        • CanvasRenderingContext2D.restore()
        • CanvasRenderingContext2D.scale()
        • CanvasRenderingContext2D.rotate()
        • CanvasRenderingContext2D.translate()
        • CanvasRenderingContext2D.transform()
        • CanvasRenderingContext2D.setTransform()
        • CanvasRenderingContext2D.globalAlpha
        • CanvasRenderingContext2D.globalCompositeOperation
        • CanvasRenderingContext2D.strokeStyle
        • CanvasRenderingContext2D.fillStyle
        • CanvasRenderingContext2D.createLinearGradient()
        • CanvasRenderingContext2D.createRadialGradient()
          • CanvasGradient 对象
            • CanvasGradient.addColorStop()
        • CanvasRenderingContext2D.createPattern()
        • CanvasRenderingContext2D.lineWidth
        • CanvasRenderingContext2D.lineCap
        • CanvasRenderingContext2D.lineJoin
        • CanvasRenderingContext2D.miterLimit
        • CanvasRenderingContext2D.shadowOffsetX
        • CanvasRenderingContext2D.shadowOffsetY
        • CanvasRenderingContext2D.shadowBlur
        • CanvasRenderingContext2D.shadowColor
        • CanvasRenderingContext2D.clearRect()
        • CanvasRenderingContext2D.fillRect()
        • CanvasRenderingContext2D.strokeRect()
        • CanvasRenderingContext2D.beginPath()
        • CanvasRenderingContext2D.closePath()
        • CanvasRenderingContext2D.moveTo()
        • CanvasRenderingContext2D.lineTo()
        • CanvasRenderingContext2D.quadraticCurveTo()
        • CanvasRenderingContext2D.bezierCurveTo()
        • CanvasRenderingContext2D.arcTo()
        • CanvasRenderingContext2D.rect()
        • CanvasRenderingContext2D.arc()
        • CanvasRenderingContext2D.fill()
        • CanvasRenderingContext2D.stroke()
        • CanvasRenderingContext2D.drawSystemFocusRing()
        • CanvasRenderingContext2D.drawCustomFocusRing()
        • CanvasRenderingContext2D.scrollPathIntoView()
        • CanvasRenderingContext2D.clip()
        • CanvasRenderingContext2D.isPointInPath()
        • CanvasRenderingContext2D.font
        • CanvasRenderingContext2D.textAlign
        • CanvasRenderingContext2D.textBaseline
        • CanvasRenderingContext2D.fillText()
        • CanvasRenderingContext2D.strokeText()
        • CanvasRenderingContext2D.measureText()
        • CanvasRenderingContext2D.drawImage()
        • CanvasRenderingContext2D.createImageData()
        • CanvasRenderingContext2D.getImageData()
        • CanvasRenderingContext2D.putImageData()
    • <map> (HTMLMapElement)
    • <area> (HTMLAreaElement)
    • <applet> (HTMLAppletElement)
  • 表格元素
    • <table> (HTMLTableElement)
    • <caption> (HTMLTableCaptionElement)
    • <colgroup> (HTMLTableColElement)
    • <col> (HTMLTableColElement)
    • <tbody> (HTMLTableSectionElement)
    • <thead> (HTMLTableSectionElement)
    • <tfoot> (HTMLTableSectionElement)
    • <tr> (HTMLTableRowElement)
    • <td> (HTMLTableDataCellElement)
    • <th> (HTMLTableHeaderCellElement)
  • 窗体元素
    • <form> (HTMLFormElement)
    • <fieldset> (HTMLFieldSetElement)
    • <legend> (HTMLLegendElement)
    • <label> (HTMLLabelElement)
    • <input> (HTMLInputElement)
    • <button> (HTMLButtonElement)
    • <select> (HTMLSelectElement)
    • <datalist> (HTMLDataListElement)
    • <optgroup> (HTMLOptGroupElement)
    • <option> (HTMLOptionElement)
    • <textarea> (HTMLTextAreaElement)
    • <keygen> (HTMLKeygenElement)
    • <output> (HTMLOutputElement)
    • <progress> (HTMLProgressElement)
    • <meter> (HTMLMeterElement)
  • 交互式元素
    • <details> (HTMLDetailsElement)
    • <summary> (HTMLElement)
    • <command> (HTMLCommandElement)
    • <menu> (HTMLMenuElement)
guoyf123321
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html转为object,怎么把[object HTMLImageElement]这种对象元素转换为标签元素img？
weixin_29056781的博客
05-30 1068
无标题文档.box{width:303px; height:628px; padding-top:66px; background:url(images/0T2154Z4-0_03.png) no-repeat center; }#box-top{ width:285px; margin:0 auto 0; height:473px; font-size:16px; font-family:"仿...
JS公共小方法之判断对象是否为domElement的实例
11-26
`nodeType`是所有DOM元素对象都有的一个属性，表示元素的类型。如果`obj`是`window`本身，那么它是一个特殊的DOM元素，或者如果`obj`有`nodeType`属性，说明它是常规的DOM元素。如果满足这两个条件之一，表达式将为...
html图片数组图片显示不了,javascript – 对象HTMLImageElement显示而不是图像
weixin_33785596的博客
06-15 533
我创建了一个包含2个图像的数组,并试图显示它们,但是我得到了文本而不是图像：对象HTMLImageElement我确信我的图像位于我正在使用的正确目录中.< template is="auto-binding">{{item}}(function() {addEventListener('polymer-ready', function() {var createImage = fun...
[object HTMLImageElement]
ZeJava的博客
02-24 2877
今天在使用JavaScript的click点击时间的时候,用jsp传值作为参数,JavaScript方法体中获取到的参数值是 [object HTMLImageElement] 后来加了单引号就好 click=changeValue(’${user.name}’) ...
HTML DOM Image 对象
蚩尤后裔-汪茂雄
11-14 1965
目录 Image 对象 Image 对象的属性 标准属性 Image 对象事件 编码示例 常用操作 事件操作 Image 对象 Image 对象代表嵌入的图像，<img> 标签每出现一次，一个 Image 对象就会被创建。 需要理解的是：为了可以方便的在 JavaScript 中来操作 <audio>和<video>...
<img>标签
立业的博客
11-27 3247
■ 定义 <img>标签用于定义网页的图片显示 <img>标签是单标签 img代表单词image，意为图像 ■ 属性 □src属性 是<img>标签的必需属性，用于在页面上显示图像 需要使用该属性指定图片的URL地址，即图像文件的路径和文件名 <img src="图片的url"> □alt属性 alt属性用来为图像定义一串预先自定义的可替换...
is-dom-image:测试对象是 DOM 图像还是画布
05-31
如果元素是DOM图像，视频，画布或ImageData ，则返回true。 这些是支持的相同图像类型。 在节点和浏览器中运行。 例子 var isDOMImage = require ( 'is-dom-image' ) if ( isDOMImage ( data ) ) { // got an ...
IMG-JavaScript-Assignment
04-17
2. **JavaScript DOM操作**：使用`document.getElementById`，`querySelector`或`querySelectorAll`等方法获取HTML元素，特别是`<img>`元素，以便进行后续的JavaScript操作。 3. **事件监听**：添加事件监听器如`...
copier-js-master.zip_Zip IMG_zip
09-20
`HTMLImageElement`对象可以加载图片，然后通过`drawImage()`方法绘制到Canvas上。`toDataURL()`方法可以将Canvas的内容转换为Base64编码的字符串，其中包含了压缩后的图像数据。通过调整Canvas的宽度和高度，我们...
javascript中获取选中对象的类型
10-30
在JavaScript中，获取选中对象的类型是一项常见的需求，特别是在处理用户交互或者进行DOM操作时。这个过程涉及到浏览器的选区API以及对不同类型的选中内容的理解。在本文中，我们将详细探讨如何在JavaScript中检查...
DOM实现获取img标签src属性的绝对位置和相对位置
好吗好的~的技术博客
12-29 4922
获取相对路径 显示图片的相对当前的文档所处的位置。 document.getElementById(obj).getAttribute('src')   获取绝对路径 显示是图片的完整路径，即在服务器的哪个文件夹下和文件命名。 document.getElementById(obj).src  ...
IHTMLObjectElement
懒雄熊的专栏
06-29 1140
该接口从IDispatch接口继承。 属性 align 设置或获取目标的对齐方式 altHtml 获取目标的html script，如果目标加载html script失败，可以设置html script BaseHref 获取目标所在的url，一般这个url都是目标所在的文档 classid 获取或设置目标的类id code 获取或设置包含在文件中编译后的java class c
漏刻有时数据可视化Echarts组件开发(43)纹理填充和HTMLImageElement知识说明
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
12-16 773
在 ECharts 中，纹理填充可以通过自定义系列（series）的itemStyle属性来实现。itemStyle属性用于设置系列中每个数据项的样式，包括填充颜色、边框颜色、边框线宽等。
关于DOM
代码火锅
09-18 304
学习前端的html,css,js，都会讲到DOM，而且用起来也很简单直观。但过去，就是学会了那几个对象的几个方法，比如document.getElementById() ，没有完整的认识。最近在讲前端课程的时候，认真阅读了W3School的DOM教程，忽然明白到了DOM的真正含义，跟大家分享。
html js 图片压缩,JavaScript前端实现压缩图片功能
weixin_39751769的博客
06-03 511
为什么要前端来压缩图片最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。压缩效果首先介绍下压缩的大概流程通过原生的input标签拿到要上传的图片文件将图片文...
了解 HTMLCanvasElement
记录点滴
06-03 3615
HTMLCanvasElement： 是所有 <canvas> 元素的代称（可以理解为是<canvas>标签的爹O(∩_∩)O哈哈~）。 类似的还有：HTMLDivElement -> 对应<div> 标签、HTMLImageElement -> 对应<img> 标签、HTMLParagraphElement 对应 <p>标签，几乎所有的标准HTML元素都对应有接口名称，然后全部都继承于：HTMLElement，完整的继承关系，下.
html里image文件,javascript – 如何从已加载的image()创建HTML 5文件？
weixin_32110907的博客
06-20 160
该文件已在您的服务器上.您可以使用它,正如Yair Nevet的答案所说.如果你真的想让它成为一个File对象,也许你可以使用它(我不知道它是否有效).var getFilelikeBlobFromImageElement = (function closure() {var canvasElement = document.createElement("canvas");return funct...
object引入html文档,object_标签 | Elements_HTML_参考手册_非常教程
weixin_39640904的博客
06-05 330
objectHTML元素(或者称作HTML 嵌入对象元素)表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。允许的内容零个或多个元素，然后是透明的。标记遗漏没有，起始和结束标签都是强制性的。允许父母任何接受嵌入内容的元素。允许ARIA角色application, document, imageDOM界面HTMLObjectElement属性这个元素包含...
IHTMLElement 得到所属的 IHTMLForm
stwstw0123的专栏
04-01 1922
http://topic.csdn.net/u/20081101/15/0e92e575-eaca-49b1-a188-0b1906bec789.html  已知一个表单元素的指针IHTMLElement... =================== 这个元素是直接的form元素还是form里面的子元素？如果是子元素，是某种input元素还是普通的元素？区别很大的。 如果这个元素就是f
js domElement 转为 HTMLImageElement
06-01
要将一个 DOM 元素转换为 `HTMLImageElement` 对象，可以使用 `XMLSerializer` 将 DOM 元素转换为字符串，然后创建一个空的 `Image` 对象并设置其 `src` 属性为字符串，从而将其转换为 `HTMLImageElement` 对象。 具体步骤如下： 1. 使用 `XMLSerializer` 将 DOM 元素转换为字符串。 ```javascript var s = new XMLSerializer(); var str = s.serializeToString(domElement); ``` 2. 创建一个空的 `Image` 对象。 ```javascript var image = new Image(); ``` 3. 设置 `Image` 对象的 `src` 属性为字符串。 ```javascript image.src = 'data:image/svg+xml;base64,' + btoa(str); ``` 这样就可以将一个 DOM 元素转换为 `HTMLImageElement` 对象了。 注意：由于使用了 `data:image/svg+xml` 方式，转换出来的 `HTMLImageElement` 对象可能无法正确显示，如果需要在页面中显示，需要将其插入到 DOM 树中，并设置其 `width` 和 `height` 属性，或者使用 `canvas` 将其绘制出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值