ディレクトリ 検索
导论 前言 为什么学习JavaScript JavaScript的历史 基本语法 语法概述 数值 字符串 对象 数组 函数 运算符 数据类型转换 错误处理机制 JavaScript 编程风格 标准库 Object对象 包装对象和Boolean对象 Number对象 String对象 Math对象 Date对象 RegExp对象 JSON对象 ArrayBuffer:类型化数组 面向对象编程 概述 封装 继承 模块化编程 DOM Node节点 document节点 Element对象 Text节点和DocumentFragment节点 Event对象 CSS操作 Mutation Observer 浏览器对象 浏览器的JavaScript引擎 定时器 window对象 history对象 Ajax 同域限制和window.postMessage方法 Web Storage:浏览器端数据储存机制 IndexedDB:浏览器端数据库 Web Notifications API Performance API 移动设备API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML网页的API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 开发工具 console对象 PhantomJS Bower:客户端库管理工具 Grunt:任务自动管理工具 Gulp:任务自动管理工具 Browserify:浏览器加载Node.js模块 RequireJS和AMD规范 Source Map JavaScript 程序测试 JavaScript高级语法 Promise对象 有限状态机 MVC框架与Backbone.js 严格模式 ECMAScript 6 介绍 附录 JavaScript API列表
テキスト

    • image元素

      • alt属性,src属性

      • complete属性

      • height属性,width属性

      • naturalWidth属性,naturalHeight属性

    • audio元素,video元素

image元素

alt属性,src属性

alt属性返回image元素的HTML标签的alt属性值,src属性返回image元素的HTML标签的src属性值。

// 方法一:HTML5构造函数Image var img1 = new Image(); img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendChild(img1); // 方法二:DOM HTMLImageElement var img2 = document.createElement('img'); img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendChild(img2); document.images[0].src // image1.png

complete属性

complete属性返回一个布尔值,true表示当前图像属于浏览器支持的图形类型,并且加载完成,解码过程没有出错,否则就返回false。

height属性,width属性

这两个属性返回image元素被浏览器渲染后的高度和宽度。

naturalWidth属性,naturalHeight属性

这两个属性只读,表示image对象真实的宽度和高度。

myImage.addEventListener('onload', function() { console.log('My width is: ', this.naturalWidth); console.log('My height is: ', this.naturalHeight); });

audio元素,video元素

audio元素和video元素加载音频和视频时,以下事件按次序发生。

  • loadstart:开始加载音频和视频。

  • durationchange:音频和视频的duration属性(时长)发生变化时触发,即已经知道媒体文件的长度。如果没有指定音频和视频文件,duration属性等于NaN。如果播放流媒体文件,没有明确的结束时间,duration属性等于Inf(Infinity)。

  • loadedmetadata:媒体文件的元数据加载完毕时触发,元数据包括duration(时长)、dimensions(大小,视频独有)和文字轨。

  • loadeddata:媒体文件的第一帧加载完毕时触发,此时整个文件还没有加载完。

  • progress:浏览器正在下载媒体文件,周期性触发。下载信息保存在元素的buffered属性中。

  • canplay:浏览器准备好播放,即使只有几帧,readyState属性变为CAN_PLAY。

  • canplaythrough:浏览器认为可以不缓冲(buffering)播放时触发,即当前下载速度保持不低于播放速度,readyState属性变为CAN_PLAY_THROUGH。

除了上面这些事件,audio元素和video元素还支持以下事件。

事件 触发条件
abort 播放中断
emptied 媒体文件加载后又被清空,比如加载后又调用load方法重新加载。
ended 播放结束
error 发生错误。该元素的error属性包含更多信息。
pause 播放暂停
play 暂停后重新开始播放
playing 开始播放,包括第一次播放、暂停后播放、结束后重新播放。
ratechange 播放速率改变
seeked 搜索操作结束
seeking 搜索操作开始
stalled 浏览器开始尝试读取媒体文件,但是没有如预期那样获取数据
suspend 加载文件停止,有可能是播放结束,也有可能是其他原因的暂停
timeupdate 网页元素的currentTime属性改变时触发。
volumechange 音量改变时触发(包括静音)。
waiting 由于另一个操作(比如搜索)还没有结束,导致当前操作(比如播放)不得不等待。


前の記事: 次の記事: