CSS3

定义和用法

title 属性设置或返回元素的标题。

语法

HTMLElementObject.title=title

浏览器支持

所有主要浏览器都支持 title 属性

实例

实例 1

返回 body 元素的 title属性：

<html>
<body id="myid" title="mytitle">

<script>
varx=document.getElementsByTagName('body')[0];
document.write("Body title: " + x.title);
document.write("<br>");
document.write("An alternate way: ");
document.write(document.getElementById('myid').title);
</script>

</body>
</html>

输出结果:

Body title: mytitle
An alternate way: mytitle

实例 2

返回图像中的区域地图标题：

<html>
<body>

<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap">

<map name ="planetmap">
<area id="venus" shape="circle"
coords ="124,58,8"
title="Venus"
href ="venus.htm">
</map>

<p>Venus' advisory title (mouse over the Venus planet):
<script>
varx=document.getElementById('venus')
document.write(x.title)
</script>
</p>

</body>
</html>

HTML DOM Time 对象

Time 对象

Time 对象是 HTML5 中新增的。

Time 对象表示一个 HTML <time> 元素。

访问 Time 对象

您可以使用 getElementById() 来访问 <time> 元素：

var x = document.getElementById("myTime");尝试一下

创建 Time 对象

您可以使用 document.createElement() 方法来创建 <time> 元素：

var x = document.createElement("TIME");尝试一下

Time 对象属性

属性	描述
dateTime	设置或返回 <time> 元素中 datetime 属性的值。

标准属性和事件

Time 对象同样支持标准属性和事件。

HTML 参考手册：HTML <time> 标签

HTML DOM Track 对象

Track 对象

Track 对象是 HTML5 新增的。

Track 对象表示 HTML <track> 元素。

访问 Track 对象

你可以通过使用 getElementById() 来访问 <track> 元素：

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

创建 Track 对象

你可以使用 document.createElement() 方法来创建 <track> 元素：

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

Track 对象属性

属性	描述
default	设置或返回轨道的默认状态
kind	设置或返回轨道的 kind 属性值
label	设置或返回轨道的 label 属性值
readyState	返回当前轨道资源的状态
src	设置或返回轨道的src属性值
srclang	设置或返回轨道的 srclang 属性值
track	返回 TextTrack 对象，表示 track 元素的轨道文本数据

标准属性和事件

Track 对象同样支持标准属性和事件。

HTML 参考手册: HTML <track> 标签

HTML DOM Video 对象

Video 对象

Video 对象是 HTML5 中新增的。

Video 对象表示 HTML <video> 元素。

访问 Video 对象t

您可以通过使用 getElementById() 来访问 <video> 元素：

var x = document.getElementById("myVideo");尝试一下

创建 Video 对象

您可以通过使用 document.createElement() 方法来创建 <video> 元素：

var x = document.createElement("VIDEO");尝试一下

Video 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放视频。
buffered	返回表示视频已缓冲部分的 TimeRanges 对象。
controller	返回表示视频当前媒体控制器的 MediaController 对象。
controls	设置或返回视频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回视频的 CORS 设置。
currentSrc	返回当前视频的 URL。
currentTime	设置或返回视频中的当前播放位置（以秒计）。
defaultMuted	设置或返回视频默认是否静音。
defaultPlaybackRate	设置或返回视频的默认播放速度。
duration	返回视频的长度（以秒计）。
ended	返回视频的播放是否已结束。
error	返回表示视频错误状态的 MediaError 对象。
height	设置或返回视频的 height 属性的值。
loop	设置或返回视频是否应在结束时再次播放。
mediaGroup	设置或返回视频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回视频的当前网络状态。
paused	设置或返回视频是否暂停。
playbackRate	设置或返回视频播放的速度。
played	返回表示视频已播放部分的 TimeRanges 对象。
poster	设置或返回视频的 poster 属性的值。
preload	设置或返回视频的 preload 属性的值。
readyState	返回视频当前的就绪状态。
seekable	返回表示视频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在视频中进行查找。
src	设置或返回视频的 src 属性的值。
startDate	返回表示当前时间偏移的 Date 对象。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象。
volume	设置或返回视频的音量。
width	设置或返回视频的 width 属性的值。

Video 对象方法

Method	描述
addTextTrack()	向视频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的视频类型。
load()	重新加载视频元素。
play()	开始播放视频。
pause()	暂停当前播放的视频。

标准属性和事件

Video 对象同样支持标准的属性和事件。

HTML 教程: HTML5 视频

HTML 参考手册: HTML <video> 标签

setinterval()是定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setinterval()的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval()返回的ID值可用作clearInterval() 方法的参数。 setInterval动作的语法格式如下：

setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])

后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计。第一种格式是标准动作面板中setInterval函数的默认语法，第二种格式是在专家模式动作中使用的方法。其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。methodName制定 object参数中要调用的方法。

interval制定对function或methodName调用两次之间的时间，单位是毫秒。后面的arg1等是可选的参数，用于制定传递给function或是methodName的参数。

setInterval它设置的时间间隔小于动画帧速（如每秒10帧，相当于100毫秒），则按照尽可能接近interval的时间间隔调用函数。而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速，则只用在每次播放头进入某一帧是才调用，以减小每次刷新屏幕的影响。

下面的例子每隔1秒调用一次匿名函数。

setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。

function show1(){    trace("每隔1秒显示一次");}function show2(str){    trace(str);}setInterval(show1,1000);setInterval(show2,2000,"每隔2秒我就会显示一次");

上面已经将函数的setInterval方法介绍了。下面我们将介绍对象的setInterval方法。

首先，写一个setInterval在动作中调用对象的方法的例子，该例子不需要传递参数。

myobj=new Object();//创建一个新的对象myobj.interval=function){    trace("每隔1秒显示一次");}//创建对象的方法。setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。

接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。

myobj=new Object();myobj.interval-function(str){    trace(str);}setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");

注意。要调用为对象定义的方法时，必须在专家模式中使用第二种语法格式。这样子的话呢，我们来作一个动态显示时间的画面。可以用下面的代码实现。

setInterval(show,1000);function show(){    time=new Date();    hour=time.getHours();       minu=time.getMinutes();       sec=time.get.Seconds();    datetime=hour+":"+minu+":"+sec;}//这里的datetime是一个动态文本框的变量名字。

用clearinterval命令让setinterval停下来

时间间隔可以用 setInterval 命令来创建并用 clearInterval 命令来终止。setInterval 所用的参数有两种格式。在第一种格式中，你传递给 setInterval 的参数可以是一个函数名，一段时间上的间隔以及一些传递给前面函数的相关参数。当 setInterval 运行时它会依照规定的时间间隔依次将列出的参数传递给指定的函数，直到你调用 clearInterval 将其终止。相关的示范代码如下：

function show(){ trace("每隔一秒我就会显示一次"); } var sh; sh=setInterval(show,1000); clearInterval(sh);

js实例代码1：

function auto(){ alert("到時間了") } var monitorInterval = null;  function setAuto(time,isFrist){ var intervalTime=time; if(isFrist!="1"){ if(intervalTime!="off"){ monitorInterval= setInterval("auto()", intervalTime*1000); }else{ if(monitorInterval){    clearInterval(monitorInterval); monitorInterval = null; } } } }

html实例代码2：

<table> <tr> <td nowrap="nowrap" bgcolor="#E8E8E8">自動更新</td> <td align="left" bgcolor="#E8E8E8"><select onchange="setAuto(this.value,'0')"> <option value="10">10sec</option> <option value="20">20sec</option> <option value="30">30sec</option> <option value="60">1min</option> <option value="300">5min</option> <option value="600">10min</option> <option value="1800">30min</option> <option value="3600">60min</option> <option value="off">Stay</option> </select></td> </tr> </table>

使用setinterval同步加载Ext多个Store

我们知道Ext js加载Store是异步加载的，这有很多好处，这里不再说明。但有时也需要多个store同步加载，比如：动态解析生成图表，需要同时加载完成图表样式、图表轴、图表序列和图表数据之后才能完整解析生成图表，任意一个store没有加载完成时，解析数据都会造成解析错误，所以必须保证全部store加载完成后才能正确进行解析。要怎么保存多个store加载的同步呢？具体实现如下：

var bChartArr =[false, false, false, false];  //加载图表轴  Ext.getStore("ChartAxes").load(  {      params:{ queryId:queryId },      callback:function(){          bChartArr[0] = true;      }  });  //加载图表序列  Ext.getStore("ChartSeries").load(  {      params:{ queryId:queryId },      callback:function(){          bChartArr[1] = true;      }    });  //加载图表样式  Ext.getStore("ChartStyle").load(  {      params:{ queryId:queryId },      callback:function(){          bChartArr[2] = true;      }  });  // 按钮  Ext.getStore("Buttons").load(  {      params:{query_id:queryId},      scope:this,      callback:function(){          bChartArr[3] = true;      }  });  var me = this;  // 等待所有的Storoe加载完成后执行  var timer = setInterval(function(){      if(bChartArr[0] && bChartArr[1] && bChartArr[2] && bChartArr[3]){          clearInterval(timer); // 清除等待          // 解析图表样式、轴、序列动态生成图表          me.createChartPanel();      }  },100);

这样就有效的解决了Ext多个异步加载的store的同步问题。

说明：这里使用了数组来判断数据是否加载完成。其实另外两个方法应该也是可以的：

1、使用一个计数代替数组，每个store加载完成时给计数加1，最后判断计数达到预期值；

2、对Store不使用callback，而使用store的isLoading()方法，当所有Stroe的isLoading( )都返回false时认为加载完成。

在JS脚本中，多个setinterval之间出现干扰怎么办？

不能同时执行是肯定的，必然有一个先后次序，但是可以几乎是同时运行。如果你确定是互扰的问题，可以只定义一个setinterval，例如：

var timeIntervalNumber = 1;var timeInterval = setInterval('doSomething()', 1000);function doSomething() {if (timeIntervalNumber % 2) {...}if (timeIntervalNumber % 5) {...}timeIntervalNumber ++;if (timeIntervalNumber >= 2 * 5) {timeIntervalNumber = 1;}}

或者如下面代码所示，页面也不会报错或者卡壳。

var firstInterval;var secondInterval;function firstAlert(){	if(firstInterval) clearInterval(firstInterval);<span style="white-space:pre">	</span>//处理所有<span style="white-space:pre">	</span>.........<span style="white-space:pre">	</span>firstInterval = setInterval('firstAlert()', 1000*2);}function secondAlert(){	if(secondInterval) clearInterval(secondInterval);<span style="white-space:pre">	</span>//处理所有<span style="white-space:pre">	</span>.......secondInterval = setInterval('secondAlert()', 1000*3);	}

onmouseleave 事件

实例

在鼠标指针移出指针时执行 JavaScript:

在以下更多实例中点 "尝试一下" 查看更多演示。

定义和用法

onmouseleave 事件在鼠标移除元素时触发。

提示： 该事件通常与onmouseenter 事件一起使用，该事件在鼠标移动到元素上时触发。

提示: onmouseleave 事件类似于onmouseout 事件。唯一的区别是 onmouseleave 事件不支持冒泡。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onmouseleave	30.0	5.5	Yes	6.1	11.5

语法

HTML 中:

<element onmouseleave="myScript">尝试一下

JavaScript 中:

object.onmouseleave=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("mouseleave", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	MouseEvent
支持的 HTML 标签:	所有 HTML 元素，除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>

实例

该实例演示了 onmousemove, onmouseleave 和 onmouseout 事件的区别:

<div onmousemove="myMoveFunction()">
<p id="demo">我将演示 onmousemove!</p>
</div>

<div onmouseleave="myLeaveFunction()">
<p id="demo2">我将演示 onmouseleave!</p>
</div>

<div onmouseout="myOutFunction()">
<p id="demo3">我将演示 onmouseout!</p>
</div>

onpaste 事件

实例

在 <input> 元素上粘贴文本时执行 JavaScript :

本文底部可以查看更多实例。

定义和用法

onpaste 事件在用户向元素中粘贴文本时触发。

注意： 虽然使用的 HTML 元素都支持 onpaste 事件，但实际上并非支持所有元素，例如 <p> 元素，除非设置了 contenteditable 为 "true" (查看下文的更多实例)。

提示： onpaste 事件通常用于 type="text" 的 <input> 元素。

提示： 有三种方式可以在元素中粘贴内容：

按下 CTRL + V
从浏览器的编辑菜单中选择 "Paste（粘贴）"
右击鼠标按钮在上下文菜单中选择 "Paste（粘贴）" 命令。

浏览器支持

事件
onpaste	Yes	Yes	Yes	Yes	Yes

语法

HTML 中：

<element onpaste="myScript">尝试一下

JavaScript 中：

object.onpaste=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("paste", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	ClipboardEvent
支持的 HTML 标签:	所有 HTML 元素

实例

当向 <p> 元素上粘贴文本内容时执行 JavaScript (注意 contenteditable 设置为 "true"):

<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容。</p>

onpageshow 事件

实例

在用户浏览网页时触发 JavaScript:

本文底部包含了更多实例。

定义和用法

onpageshow 事件在用户浏览网页时触发。

onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发，onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false (查看以下 "更多实例" )。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onpageshow	Yes	11.0	Yes	5.0	Yes

语法

HTML 中：

<element onpageshow="myScript">尝试一下

JavaScript 中：

object.onpageshow=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("pageshow", myScript);尝试一下

注意： Internet Explorer8 及更早 IE 版本的浏览器不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	PageTransitionEvent
支持的 HTML 标签:	<body>

实例

查看页面是否从浏览器缓存中读取：

function myFunction(event) {
alert("该页面是否从浏览器缓存中读取? " + event.persisted);
}

onpagehide 事件

实例

当用户从网页离开时执行 JavaScript :

定义和用法

onpagehide 事件在用户离开网页时触发。

离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。.

onpagehide 事件有时可以替代onunload 事件，但 onunload 事件触发后无法缓存页面。

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onpagehide	Yes	11.0	Yes	5.0	Yes

语法

HTML 中：

<element onpagehide="myScript">

JavaScript 中：

object.onpagehide=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("pagehide", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	PageTransitionEvent
支持的 HTML 标签:	<body>

ondurationchange 事件

实例

当视频的时长发生变化时执行 JavaScript:

本文底部包含了更多实例。

定义和用法

ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。

注意： 当视频/音频（audio/video）已经加载后，视频/音频（audio/video）的时长从 "NaN" 修改为正在的时长。

在视频/音频（audio/video）加载过程中，事件的触发顺序如下:

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
ondurationchange	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element ondurationchange="myScript">尝试一下

JavaScript 中：

object.ondurationchange=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("durationchange", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

实例

当音频开始加载时执行 JavaScript :

onsuspend 事件

实例

在浏览器读取媒体数据中止时执行 JavaScript :

定义和用法

onsuspend 事件在浏览器读取媒体数据中止时触发。

提示： 影响媒体加载的事件有：

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onsuspend	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element onsuspend="myScript">

JavaScript 中：

object.onsuspend=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("suspend", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

onprogress 事件

实例

视频正在下载时执行 JavaScript :

本文底部包含了更多实例。

定义和用法

onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。

在下载视频/音频（audio/video）过程中，事件触发的顺序如下：

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onprogress	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element onprogress="myScript">尝试一下

JavaScript 中：

object.onprogress=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("progress", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

实例

音频正在下载时执行 JavaScript :

animationstart 事件

实例

在 CSS 动画开始播放时为 <div> 元素添加监听事件:

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

// Chrome, Safari 和 Opera 代码
x.addEventListener("webkitAnimationStart", myStartFunction);

// 标准语法
x.addEventListener("animationstart", myStartFunction);

定义和用法

animationstart 事件在 CSS 动画开始播放时触发。

更多关于 CSS 动画的内容，请查看我们的CSS3 动画章节。

CSS 动画播放时，会发生以下三个事件：

animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

"webkit" 或 "moz" 后面指定的数字为支持该事件的第一个版本号前缀。

事件
animationstart	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

注意： Chrome, Safari 和 Opera 浏览器使用webkitAnimationEnd 前缀。

语法

object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	Yes
是否可以取消:	No
事件类型:	AnimationEvent

onseeked 事件

实例

在用户重新定位视频的播放位置后执行 JavaScript :

本文底部包含了更多实例。

定义和用法

onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。

提示： 与 onseeked 事件相反的是onseeking事件。

提示： 使用 currentTime 可以设置或返回视频/音频（audio/video）播放的当前位置。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onseeked	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element onseeked="myScript">尝试一下

JavaScript 中：

object.onseeked=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("seeked", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

实例

以下实例演示了 onseeking 事件和onseeked 事件的区别:

实例

在用户重新定位视频播放位置后，可以使用 Video 对象的 currentTime 属性来显示当前的播放位置：

// 获取 id="myVideo" 的 <video> 元素
var x =document.getElementById("myVideo");

// 如果寻找完成，即向 <video> 添加 seeked事件，并执行响应的函数
x.addEventListener("seeked", myFunction);

function myFunction() {
//显示 id="demo" 的 <p> 元素中的视频当前播放位置
document.getElementById("demo").innerHTML = x.currentTime;
}

实例

在音频重新定位播放位置后执行 JavaScript :

which 事件属性

实例

获取按下的键盘按键Unicode值：

var x = event.which;

x 输出结果为:

119 // 119 是字符"w"

本文底部包含了更多实例。

定义和使用

which 属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或onkeyup 事件的键的代码。

两种代码类型的区别是:

字符代码 - 表示 ASCII 字符的数字
键盘代码 - 表示键盘上真实键的数字

两种类型的值不是都相等的，例如小写字符"w" 和大写字符 "W" 有相同的键盘代码，因为他们他们键盘上 ( "W" 代码为 "87")，但是它们有不同的字符代码，两个字符输出是不一样的( "w" 和 "W" 字符代码为"119" 和 "87") - 查看以下实例可以更好的理解。

提示： 如果需要知道用户按下的是打印键 (如"a" 或 "5")，建议使用 onkeypress 事件。如果需要知道用户按下的是功能键(如 "F1", "CAPSLOCK" 或 "Home") 可使用 onkeydown 或 onkeyup 事件。

注意：IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。兼容这些浏览器你可以使用以下代码：

var x = event.which || event.keyCode; // 使用 which 或 keyCode, 这样可支持不同浏览器

提示： 所有 Unicode 字符列表可查看我们的完整 Unicode 参考手册。

提示： 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。

注意： 该属性是只读的。

注意： which和 keyCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用key 属性来替代该方法。

提示： 如果你想查看是否按下了 "ALT", "CTRL","META" 或 "SHIFT" 键，可使用altKey, ctrlKey, metaKey 或shiftKey 属性。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
which	Yes	9.0	Yes	Yes	Yes

语法

event.which

技术细节

返回值：	数字，表示 Unicode 字符代码或 Unicode 键代码
DOM 版本:	DOM Level 2 Events

实例

使用 onkeypress 和 onkeydown 来演示字符代码与键盘代码的区别：

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">

function uniCharCode(event) {
    var char = event.which ||event.keyCode; // event.keyCode 用于 IE8 及更早版本
   document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " +char;
}

function uniKeyCode(event) {
    var key = event.which|| event.keyCode; // event.keyCode 用于 IE8 及更早版本
   document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}

当在键盘上按下 "a" 键 (不使用大写锁定), 输出结果如下:

Unicode 字符代码: 97
Unicode 键盘代码: 65

实例

如果按下 Esc 键弹出提示信息：

<input type="text" onkeydown="myFunction(event)">

functionmyFunction(event) {
    var x = event.which || event.keyCode; //event.keyCode 用于 IE8 及更早版本
   if (x == 27) { // 27 是 ESC 键
        alert ("You pressed the Escape key!");
    }
}

实例

将 Unicode 值转换为字符 (不能用于功能键):

var x = event.which || event.keyCode; //获取 Unicode 值
var y = String.fromCharCode(x); // 将值转换为字符

metaKey 事件属性

定义和用法

metaKey 事件属性可返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。

语法

event.metaKey

实例

下面的例子可提示当鼠标按键被点击时 "meta" 键是否被按住：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function isKeyPressed(event){
    if (event.metaKey==1){
        alert("meta键被按下!");
    }else{
        alert("meta键没被按下!");
    }
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">

<p>单击文档中的某个地方。一个警告框会告诉你是否你按下meta关键。</p>

</body>
</html>

onoffline 事件

实例

在浏览器离在线工作时执行 JavaScript :

定义和用法

onoffline 事件在浏览器离线工作时触发。

提示： onoffline 事件的相反事件是ononline 。

提示： 你同样可以使用 navigator.onLine 属性来擦可能浏览器是否是在线或离线模式。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onoffline	不支持	IE11 已废弃 8.0	3.0	不支持	不支持

语法

HTML 中：

<element onoffline="myScript">尝试一下

JavaScript 中：

object.onoffline=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("offline", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<body>

button 事件属性

定义和用法

button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

语法

event.button=0|1|2

参数	描述
0	指定鼠标左键。
1	指定鼠标中键。
2	指定鼠标右键。

注意： Internet Explorer 8 及更早IE版本有不同的参数：

参数	描述
1	指定鼠标左键。 (IE8及更早IE版本)
4	指定鼠标中键。 (IE8及更早IE版本)
2	指定鼠标右键。

提示和注释

注意： 对于惯用左手的鼠标配置，上面的参数是颠倒的。

relatedTarget 事件属性

定义和用法

relatedTarget 事件属性返回与事件的目标节点相关的节点。

对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用。

语法

event.relatedTarget

实例

下面例子可返回指针刚刚离开的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function getRelatedElement(event){
alert("鼠标指针移到了 " + event.relatedTarget.tagName + " 元素");
}
</script>
</head>
<body>

<p onmouseover="getRelatedElement(event)">鼠标移到这一段。</p>

</body>
</html>

onshow 事件

实例

当 <menu> 元素在上下文菜单显示时执行 JavaScript:

<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<p>用鼠标右键单击黄色框区域查看上下文菜单！</p>
<menuitem label="刷新" onclick="window.location.reload();"></menuitem>
</menu>
</div>

定义和用法

onshow 事件当 <menu> 元素在上下文菜单显示时触发。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onshow	不支持	不支持	8.0	不支持	不支持

语法

HTML 中：

<element onshow="myScript">尝试一下

JavaScript 中：

object.onshow=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("show", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<menu>

clientX 事件属性

定义和用法

clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口。

语法

event.clientX

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function show_coords(event){
    var x=event.clientX;
    var y=event.clientY;
    alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>

<p onmousedown="show_coords(event)">请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>
</html>

screenX 事件属性

定义和用法

screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。

语法

event.screenX

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script type="text/javascript">
function coordinates(event){
    x=event.screenX
    y=event.screenY
    alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">

<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>

</body>
</html>

ontoggle 事件

实例

当 <details> 元素在打开或关闭时执行 JavaScript:

定义和用法

ontoggle 事件在用户打开或关闭 <details> 元素时触发。

<details> 元素描述了额外的信息，用户可以根据需求查看或隐藏它。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
ontoggle	12.0	不支持	不支持	6.0	15.0

语法

HTML 中：

<element ontoggle="myScript">尝试一下

JavaScript 中：

object.ontoggle=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("toggle", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<details>

clientY 事件属性

定义和用法

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。

语法

event.clientY

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

bubbles 事件属性

定义和用法

bubbles 事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。

事件冒泡分为三个阶段，它是这样的:

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

语法

event.bubbles

实例

下面的例子可检测发生的事件是否是一个起泡事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function myFunction(e){
alert(e.bubbles);
}
</script>
</head>
<body>

<p onclick="myFunction(event)">点击这个段落，如果事件是一个冒泡事件将弹出警告框提示。</p>

</body>
</html>

ctrlKey 事件属性

定义和用法

ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。

语法

event.ctrlKey=true|false|1|0

实例

下面的例子可提示当鼠标按键被点击时 "CTRL" 键是否被按住：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function isKeyPressed(event){
    if (event.ctrlKey==1){
        alert("CTRL键被按下!");
    }else{
        alert("CTRL键没被按下!");
    }
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">

<p>单击文档中的某个地方。一个警告框会告诉你你是否按下CTRL键。</p>

</body>
</html>

shiftKey Event 属性

定义和用法

shiftKey 事件属性可返回一个布尔值，指示当事件发生时，"SHIFT" 键是否被按下并保持住。

语法

event.shiftKey=true|false|1|0

实例

下面的例子可提示当鼠标按键被点击时 "SHIFT" 键是否被按住：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function isKeyPressed(event){
    if (event.shiftKey==1){
        alert(" shift 键被按下!");
    }
    else{
        alert(" shift 键没被按下!");
    }
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">

<p>点击该段落，弹窗会提示是否按下 shift 键。</p>

</body>
</html>

cancelable 事件属性

定义和用法

cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。

语法

event.cancelable

实例

下面的例子讲检测发生的事件是否是一个 cancelable 事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function myFunction(e){
alert(e.cancelable);
}
</script>
</head>
<body>

<p onclick="myFunction(event)">单击这个段落，如果事件是可以取消的将弹出警告框。</p>

</body>
</html>

location 事件属性

实例

获取键所处的位置：

var x = event.location;

x 输出结果为：

定义和使用

location 属性返回按键在键盘或设置上的位置。

数字可由 4 个常数表示：

0. DOM_KEY_LOCATION_STANDARD:

表示不是最左边或者最右边的按键，也不是数字键盘上的数字（该值几乎包含了所有的按键，如 "A", "U", "SPACE" 或 "5")

1. DOM_KEY_LOCATION_LEFT:

左侧按键 (如果左侧的 "CTRL" 键或左侧的"ALT" 键)

2. DOM_KEY_LOCATION_RIGHT:

右侧按键 (如果右侧的 "CTRL" 键或左侧的"ALT" 键)

3. DOM_KEY_LOCATION_NUMPAD:

数字按键（在标准键盘的右侧）

注意： location 属性可用于onkeydown 和 onkeyup 事件，但不能用于onkeypress事件。

注意： 该属性是只读的。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
location	Yes	9.0	15.0	不支持	Yes

语法

event.location

技术细节

返回值:

数字，代表键盘或设备上按键的位置。

4 个数字可用常数来表示:

0. DOM_KEY_LOCATION_STANDARD
1. DOM_KEY_LOCATION_LEFT
2. DOM_KEY_LOCATION_RIGHT
3. DOM_KEY_LOCATION_NUMPAD

DOM 版本:

DOM Level 3 Events

currentTarget 事件属性

定义和用法

currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。

在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。

语法

event.currentTarget

实例

下面的例子可获得哪个元素的监听器触发了事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function myFunction(e){
alert(e.currentTarget);
}
</script>
</head>
<body onclick="myFunction(event)">

<p>点击这个段落。一个警告框将警报eventlistener触发事件的元素。</p>
<p><strong>注意:</strong> currentTarget属性并不一定返回点击的元素,eventlistener触发事件的元素。</p>

</body>
</html>

Body aLink 属性

定义和用法

aLink 属性可设置或者返回 body 元素中 alink 属性的值。

alink 属性指定了文档链接点击时的颜色 (链接被点击时)。

语法

设置 aLink 属性:

bodyObject.aLink="color"

返回 aLink 属性:

bodyObject.aLink

值	描述
color	指定了链接颜色。查看完整的 CSS 颜色值

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 aLink 属性

实例

返回页面链接，链接点击时，链接点击后的颜色值：

<html>
<body id="w3s" link="blue" alink="green" vlink="red">

<p><a href="http://www.51coolma.cn">W3CSchool.cn</a></p>
<p><a href="//www.51coolma.cn/html/">HTML Tutorial</a></p>

<script>
document.write("Link color is: ")
document.write(document.getElementById("w3s").link);
document.write("<br>Active link color is: ")
document.write(document.getElementById("w3s").aLink);
document.write("<br>Visited link color is: ")
document.write(document.getElementById("w3s").vLink);
</script>

</body>
</html>

key 事件属性

实例

按下按键时获取键盘按钮：

var x = event.key;

x 输出结果为：

Enter

本文底部包含了更多实例。

定义和使用

key 事件在按下按键时返回按键的标识符。

按键标识符是表示键盘按钮的字符串，该属性的返回值可以是：

单个字母 (如 "a", "W", "4", "+" 或 "$")
多个字母 (如 "F1", "Enter", "HOME" 或 "CAPS LOCK")

提示： 如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
key	不支持	9.0	23.0	不支持	不支持

语法

event.key

技术细节

返回值：	字符串，表示按键按钮。可能值：单个字母 (如 "a", "W", "4", "+" 或 "$") 多个字母 (如 "F1", "Enter", "HOME" 或 "CAPS LOCK") 注意： Chrome，Safari 和 Opera浏览器返回 undefined
DOM 版本:	DOM Level 3 Events

实例

在用户按下 "A" 键时弹出提示信息:

var x = event.key;

// 按下 "a" 或 "A" 键 (使用 caps lock 或 shift)，弹出提示信息

if (x == "a" || x == "A") {
alert ("你按下了 'A' 键!");
}

timeStamp 事件属性

定义和用法

timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。

epoch 是一个事件参考点。在这里，它是客户机启动的时间。

并非所有系统都提供该信息，因此，timeStamp 属性并非对所有系统/事件都是可用的。

语法

event.timeStamp

实例

下面的例子可获得系统启动开始的事件戳：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function myFunction(e){
alert(e.timeStamp);
}
</script>
</head>
<body>

<p onclick="myFunction(event)">点击这一段。弹出一个警告框，含有时间戳。</p>

</body>
</html>

Body bgColor 属性

定义和用法

bgColor 属性可设置或者返回 body 元素的 bgcolor 属性值。x

bgcolor 属性指定了文档的背景颜色。

语法

设置 bgColor 属性:

bodyObject.bgColor="color"

返回 bgColor 属性:

bodyObject.bgColor

值	描述
color	指定了背景颜色。查看完整的 CSS 颜色值

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 bgColor 属性

实例

返回body元素的bgcolor属性值：

<html>
<body id="w3s" bgcolor="#E6E6FA">

<script>
document.write("The background color is: ")
document.write(document.getElementById("w3s").bgColor);
</script>

</body>
</html>

Body link 属性

定义和用法

link 属性可设置或者返回 body 元素的 link属性值。

link 属性指定了文档中链接未被点击访问的颜色。

语法

设置 link 属性:

bodyObject.link="color"

返回 link 属性:

bodyObject.link

值	描述
color	指定链接颜色。查看完整的 CSS 颜色值

浏览器支持

所有主要浏览器都支持 link 属性

实例

返回文档中未被点击链接，点击链接，点击访问后的链接颜色:

<html>
<body id="w3s" link="blue" alink="green" vlink="red">

<p><a href="http://www.51coolma.cn">W3CSchool.cc</a></p>
<p><a href="//www.51coolma.cn/html/">HTML Tutorial</a></p>

<script>
document.write("Link color is: ")
document.write(document.getElementById("w3s").link);
document.write("<br>Active link color is: ")
document.write(document.getElementById("w3s").aLink);
document.write("<br>Visited link color is: ")
document.write(document.getElementById("w3s").vLink);
</script>

</body>
</html>

Body text 属性

定义和用法

text 属性可设置或者返回 body 元素的 text 属性值。

text 属性描述了文档的文本颜色。

语法

设置 text 属性:

bodyObject.text="color"

返回 text 属性:

bodyObject.text

值	描述
color	指定了文本颜色。查看完整的 CSS 颜色值

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 text 属性。

实例

返回 body 元素的 text 属性值：

<html>
<body id="w3s" text="#0000FF">

<script>
document.write("The text color is: ")
document.write(document.getElementById("w3s").text);
</script>

</body>
</html>

Body vLink 属性

定义和用法

vLink 属性可设置或者返回 body 元素中vlink属性值。

vlink 属性描述了点击过的链接文本颜色。

语法

设置 vLink 属性:

bodyObject.vLink="color"

返回 vLink 属性:

bodyObject.vLink

值	描述
color	指定链接颜色。查看完整的 CSS 颜色值

浏览器支持

所有主要浏览器都支持 vLink 属性

实例

返回页面链接点击及点击后文本的颜色值:

Fieldset disabled 属性

实例

禁用 fieldset：

document.getElementById("myFieldset").disabled=true;

输出结果：

Personalia: 用户名：
Email：
出生日期：

定义和用法

disabled 属性设置或返回是否禁用一组相关的表单元素（一个 fieldset）。

如果设置了该属性，则禁用 fieldset 中的表单属性。

禁用的元素不可用，也不可点击。默认情况下，禁用的元素通常在浏览器中呈现为灰色。

该属性反映了 HTML disabled 属性。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

除了 Internet Explorer 和 Safari，其他主流浏览器都支持 disabled 属性。

语法

返回 disabled 属性：

fieldsetObject.disabled

设置 disabled 属性：

fieldsetObject.disabled=true|false

属性值

值	描述
true\|false	指定是否禁用一组相关的表单元素（一个 fieldset）。 true - 禁用 fieldset。 false - 默认。不禁用 fieldset。

技术细节

返回值：	布尔值，如果禁用 fieldset 则返回 true，否则返回 false。

实例

检测一个 fieldset 是否被禁用：

var x = document.getElementById("myFieldset").disabled;

x 输出结果为：

true

实例

禁用和取消禁用 fieldset：

function disableField()
{
document.getElementById("myFieldset").disabled=true;
}
function undisableFieldset()
{
document.getElementById("myFieldset").disabled=false;
}

HTML 参考手册：HTML <fieldset> disabled 属性

Fieldset form 属性

实例

返回包含 <fieldset> 元素的表单的 id：

var x = document.getElementById("myFieldset").form.id;

x 输出结果为：

myForm

定义和用法

form 属性返回一个包含 fieldset 的表单的引用。

如果成功，该属性返回一个表单对象。

注意：该属性是只读的。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 form 属性。

语法

fieldsetObject.form

技术细节

返回值：	一个包含 fieldset 的表单的引用。如果 fieldset 不在表单内，则返回 null。

Fieldset name 属性

实例

返回 fieldset 的 name 属性的值：

var x = document.getElementById("myFieldset").name;

x 输出结果为：

personalia

定义和用法

name 属性设置或返回 fieldset 的 name 属性的值。

name 属性用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。

注意：只有带有 name 属性的表单元素在提交表单时才传递它们的值。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

除了 Internet Explorer 和 Safari，其他主流浏览器都支持 name 属性。

注意：Opera 12 及其之前的版本不支持 name 属性。

语法

返回 name 属性：

fieldsetObject.name

设置 name 属性：

fieldsetObject.name=name

属性值

值	描述
name	指定 fieldset 的名称。

技术细节

返回值：	字符串，表示 fieldset 的名称。

实例

改变 fieldset 的 name 属性的值：

document.getElementById("myFieldset").name="newName";

HTML 参考手册：HTML <fieldset> name 属性

del cite 属性

del 对象参考手册 del 对象

实例

返回解释文本被删除的URL文档地址：

var x = document.getElementById("myDel").cite;

x 输出结果为:

http://www.example.com/example/why_deleted.htm

定义和使用

cite 属性用于设置或者返回删除文本的cite属性值。

cite 属性指向另外一个文档的 URL，此文档可解释文本被删除的原因。。

注意: cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 cite 属性。

语法

返回 cite 属性:

delObject.cite

设置 cite 属性:

delObject.cite=URL

属性值

Value	描述
URL	定义了解释文本为什么被删除的URL文档地址。 Possible values: 绝对 URL - 指向另一个网站（比如 cite="http://www.example.com"）相对 URL - 指向网站内的一个页面（比如 cite="example.html"）

技术描述

返回值:	字符串, 代表着源文档的URL地址

实例

修改 cite 属性值:

document.getElementById("myDel").cite="http://www.example.com/whywedeletedsometext.htm";

Dialog open 属性

实例

打开对话窗口:

document.getElementById("myDialog").open = true;

定义和用法

open 属性用于设置或者返回对话窗口是否打开。

该属性反映了 <dialog> open 属性。

如果指定了该属性，及说明对话窗口是可用的，用户可以与它进行交互。

注意： <dialog> 元素是 HTML5 新增的。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 open 属性。

注意： 即便 Chrome Canary 支持 <dialog> 元素，你必须在Chrome地址栏中打开 chrome://flags 并开启 "Enable experimental Web Platform features" 标记。在开启后，你需要重启Chrome浏览器。

语法

返回 open 属性：

dialogObject.open

设置 open 属性：

dialogObject.open=true|false

属性值

值	描述
true\|false	指定对话窗口是否打开 true - 对话窗口是打开的 false - 默认。对话窗口是关闭。

技术细节

返回值：	布尔值，如果对话窗口是打开的返回TRUE，否则返回 FALSE。

实例

查看对话窗口是否打开：

var x = document.getElementById("myDialog").open;

x输出结果为：

true

HTML 参考手册: HTML <dialog> open 属性

Frame/IFrame contentDocument 属性

定义和用法

contentDocument 属性以 HTML 对象返回框架容纳的文档。

可以通过所有标准的 DOM 方法来处理被返回的对象。

注意：由于安全原因，文档的内容只能通过同一个域名下的另外一个文档访问。

语法

frameObject.contentDocument

或者

iframeObject.contentDocument

浏览器支持

所有主要浏览器都支持 contentDocument 属性

注意：如果指定了 !DOCTYPE， Internet Explorer 8 及更高版本支持 contentDocument属性，其他IE版本请使用 contentWindow 属性。

实例

通过浏览器实例展示了如何在修改iframe中文档的背景颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function changeStyle(){
    var x=document.getElementById("myframe");
    var y=(x.contentWindow || x.contentDocument);
    if (y.document)y=y.document;
    y.body.style.backgroundColor="#0000ff";
}
</script>
</head>
<body>

<iframe id="myframe" src="demo_iframe.htm">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeStyle()" value="修改背景颜色">

</body>
</html>

Dialog close() 方法

实例

显示和关闭对话窗口:

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

functionshowDialog()
{
x.show();
}

function closeDialog()
{
x.close();
}

定义和用法

close() 方法用于关闭对话窗口。

提示： 该方法通常与show() 方法一起使用。

浏览器支持

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 close() 方法。

语法

dialogObject.close()

Frame/IFrame frameBorder 属性

定义和用法

frameBorder 属性可设置或者返回 frame/iframe 元素的 frameborder 属性值。

frameborder 属性指定是否显示 iframe 周围的边框。

语法

frameObject.frameBorder=value

或者

iframeObject.frameBorder=value

frameBorder 属性可以是以下值：

值	描述
1	开启边框(默认)
0	关闭边框

浏览器支持

所有主要浏览器都支持 frameBorder 属性

实例

实例 1

返回 frameborder 属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
</head>
<body>

<iframe id="myframe" src="http://www.51coolma.com" rel="external nofollow" rel="external nofollow" frameborder="0">
<p>你的浏览器不支持 iframes.</p>
</iframe>

<p>这个frameborder已设置:
<script>
document.write(document.getElementById("myframe").frameBorder);
</script>
<p>

</body>
</html>

实例 2

移除 frameborder:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function removeBorder(){
document.getElementById("myframe").frameBorder="0";
}
</script>
</head>
<body>

<iframe id="myframe" src="http://www.51coolma.com" rel="external nofollow" rel="external nofollow" >
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="removeBorder()" value="移除边界">
<p><b>注意:</b> 该实例不能工作在IE浏览器。</p>

</body>
</html>

Dialog show() 方法

实例

显示或者关闭对话窗口：

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

functionshowDialog()
{
x.show();
}

function closeDialog()
{
x.close();
}

定义和用法

show() 方法用于显示对话窗口。

当该方法用于显示对话窗口时，用户仍然可以与页面的其他元素进行交互。如果你不想让用户在对话窗口弹出时与页面交互，你可以使用 showModal() 方法。

提示：该方法通常与close() 方法一起使用。

浏览器支持

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 show() 方法。

语法

dialogObject.show()

IFrame height 属性

定义和用法

height 属性可设置或者返回 iframe 元素中 height 属性的值。

height 属性指定了 iframe 的高度（以像素或百分比为单位）。

语法

iframeObject.height=value

height 属性可以是以下值：

值	描述
pixels	height 属性单位可以是像素 (如 "100px" 或者 "100")
%	height 属性单位可以是百分比 (如"20%")

浏览器支持

所有主要浏览器都支持 height 属性

实例

改变 iframe 的高度与宽度：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function changeSize(){
    document.getElementById("myframe").height="300";
    document.getElementById("myframe").width="300";
}
</script>
</head>
<body>

<iframe id="myframe" src="http://www.51coolma.com" rel="external nofollow" height="200" width="200">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeSize()" value="修改大小">

</body>
</html>

Frame/IFrame longDesc 属性

定义和用法

longDesc 属性可设置或者返回 frame/iframe 元素中 longDesc 属性的值。

longdesc 属性指定了一个框架内容描述的 URL。

注意：对不支持框架的浏览器可以使用该属性。

语法

frameObject.longDesc=URL

或者

iframeObject.longDesc=URL

浏览器支持

所有主要浏览器都支持 longDesc 属性

实例

返回 longdesc 属性的值:

document.write(document.getElementById("myframe").longDesc);

Submit form 属性

定义和用法

form 属性可返回对包含该确认按钮的表单的引用。

若成功，该属性返回一个表单对象。

语法

submitObject.form

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 form 属性

实例

下面的例子将返回该确认按钮所属的表单的 id：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
var x=document.getElementById("submit1").form.id;
alert(x);
}
</script>
</head>
<body>

<form id="form1">
Email: <input type="text" id="email">
<input type="submit" id="submit1">
</form>
<button type="button" onclick="displayResult()">显示所属表单的ID</button>

</body>
</html>

Frame/IFrame marginHeight 属性

定义和用法

marginHeight 属性可设置或返回 frame/iframe 元素中 marginHeight 元素的值。

marginheight 属性框架的顶部和底部页空白（以像素为单位）。

语法

frameObject.marginHeight=pixels

或者

iframeObject.marginHeight=pixels

浏览器支持

所有主要浏览器都支持 marginHeight 属性

实例

返回 marginheight 属性的值:

document.write(document.getElementById("myframe").marginHeight);

Input Number disabled 属性

实例

禁用 number 字段:

document.getElementById("myNumber").disabled = true;

结果输出为:

定义和用法

disabled 属性用于设置或者返回 number 字段是否被禁用。

使用 disabled 属性的元素是不可用和不可点击的。禁用的元素在浏览器上通常显示为灰色。

该属性反映了 HTML disabled 属性。

浏览器支持

所有主流浏览器都支持 disabled 属性

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

返回 disabled 属性：

numberObject.disabled

设置 disabled 属性：

numberObject.disabled=true|false

属性值

值	描述
true\|false	描述 number 字段是否可用。 number 字段不可用 false -默认。 number 字段可用

技术细节

返回值：	布尔值，如果 number 字段不可用返回true，否则返回false

实例

查看 number 字段是否可用：

var x = document.getElementById("myNumber").disabled;

x输出结果为：

true

实例

禁用或启用 number 字段：

function disableBtn() {
document.getElementById("myNumber").disabled = true;
}
function undisableBtn() {
document.getElementById("myNumber").disabled = false;
}

Submit name 属性

定义和用法

name 属性可设置或者返回提交按钮的 name 属性值。

name 属性用于表单提交后向服务器传送数据，或者在Javascript引用表单数据。

注意： 在表单提交后只有表单元素的 name 属性才会传递数据值。

语法

设置 name 属性:

submitObject.name="name"

返回 name 属性:

submitObject.name

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 name 属性

实例

下面的例子可显示出该确认按钮的名称：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
var x=document.getElementById("submit1").name;
alert(x);
}
</script>
</head>
<body>

<form>
Email: <input type="text" id="email">
<input type="submit" name="submit1" id="submit1">
</form>
<button type="button" onclick="displayResult()">显示提交按钮的名称</button>

</body>
</html>

Frame/IFrame marginWidth 属性

定义和用法

marginWidth 属性可设置或者返回 frame/iframe 元素中 marginWidth 属性的值。

marginwidth 属性指定了框架的左边缘和右边缘的页空白（以像素为单位）。

语法

frameObject.marginWidth=pixels

或者

iframeObject.marginWidth=pixels

浏览器支持

所有主要浏览器都支持 marginWidth 属性

实例

返回 marginwidth 属性的值:

document.write(document.getElementById("myframe").marginWidth);

Input Number form 属性

实例

返回<input type="number"> 元素所属的表单id:

var x = document.getElementById("myNumber").form.id;

x输出结果为：

myForm

定义和用法

form 属性返回包含 number 字段的表单引用。

成功时该属性返回 form 对象。

注意： 该属性为只读属性。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 form 属性

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

numberObject.form

技术细节

返回值：	包含 number 字段表单元素的引用。如果 number 字段没有在表单中，返回 null。

Submit type 属性

定义和用法

type 属性可返回确认按钮的表单元素类型。

对于确认按钮，该属性总是 "submit"。

语法

submitObject.type

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 type 属性

实例

下面的例子可返回确认按钮的表单元素类型：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
var x=document.getElementById("submit1").type;
alert(x);
}
</script>
</head>
<body>

<form>
Email: <input type="text" id="email">
<input type="submit" id="submit1">
</form>
<button type="button" onclick="displayResult()">显示 input 类型</button>

</body>
</html>

Frame/IFrame name 属性

定义和用法

name 属性可设置或者返回 frame/iframe 元素的 name 属性值。

语法

frameObject.name=name

或者

iframeObject.name=name

浏览器支持

所有主要浏览器都支持 name 属性

实例

返回 name 属性的值：

document.write(document.getElementById("myframe").name);

Password defaultValue 属性

定义和用法

defaultValue 属性可设置或返回密码域的默认值。

注意： 该默认值是在 HTML "value" 属性中规定的默认值。

语法

设置 defaultValue 属性:

passwordObject.defaultValue="value"

返回 defaultValue 属性:

passwordObject.defaultValue

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 defaultValue 属性

实例

下面的例子可获得密码域的默认值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function displayResult(){
var x=document.getElementById("pwd").defaultValue;
alert(x);
}
</script>
</head>
<body>

<form>
密码: <input type="password" id="pwd" value="thgrt456">
</form>
<button type="button" onclick="displayResult()">显示默认值</button>

</body>
</html>

Input Number placeholder 属性

实例

修改 number 字段的提示信息文本:

document.getElementById("myNumber").placeholder = "Amount";

定义和用法

placeholder 属性用于设置或者返回 number 字段的 placeholder 属性值。

placeholder 属性提供可描述输入字段预期值的提示信息。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 placeholder 属性。

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

返回 placeholder 属性：

numberObject.placeholder

设置 placeholder 属性：

numberObject.placeholder=text

属性值

值	描述
text	描述了number字段预期值提示信息 (一个单词或一个短语)

技术细节

返回值：	字符串，表示number字段预期值提示信息

实例

显示 number 字段的提示信息:

var x = document.getElementById("myNumber").placeholder;

x输出结果为：

Quantity

Frame/IFrame src 属性

定义和用法

src 属性可设置或者返回 frame/iframe 元素中 src 属性的值。

src 属性指定了被载入 frame/iframe中的文档的 URL 。

语法

frameObject.src=URL

或者

iframeObject.src=URL

浏览器支持

所有主要浏览器都支持 src 属性

实例

改变iframe中src属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function changeSrc(){
document.getElementById("myframe").src="http://www.baidu.com" rel="external nofollow" ;
}
</script>
</head>
<body>

<iframe id="myframe" src="http://www.51coolma.com" rel="external nofollow" >
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeSrc()" value="修改源链接">

</body>
</html>

IFrame width 属性

定义和用法

width 属性可设置或者返回 iframe 元素中 width 属性的值。

width 属性指定了iframe的宽度。

语法

iframeObject.width=value

width 属性可以是以下值：

值	描述
pixels	以像素作为单位 (如"100px" 或者 "100")
%	以百分比作为宽度 (如 "20%")

浏览器支持

所有主要浏览器都支持 width 属性

实例

改变 iframe的高度与宽度:

Input Number type 属性

实例

返回 number 字段的表单元素类型:

var x = document.getElementById("myNumber").type;

x 输出结果为:

number

定义和用法

type 属性返回 number 字段的表单类型类型。

在 input number 中，该属性通常返回 "number"。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 type 属性

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

numberObject.type

技术细节

返回值：	字符串，表示 number 字段的表单元素类型

Script src 属性

实例

获取外部引用脚本文件的字符集：

var x = document.getElementById("myScript").src

x 输出结果为:

//www.51coolma.cn/jsref/demo_script_src.js

定义和用法

charset 属性规定在外部脚本文件中使用的字符编码。

当外部脚本文件中的字符编码与 HTML 文档中的编码不同时，会用到 charset 属性。

注意： charset 属性仅适用于外部脚本（只有在使用 src 属性时）。

浏览器支持

属性
charset	Yes	Yes	Yes	Yes	Yes

语法

返回 charset 属性：

scriptObject.charset

设置 charset 属性：

scriptObject.charset=charset

属性值

值

描述

charset

规定外部脚本文件的字符编码。

一些常用的值：

"ISO-8859-1" - 拉丁字母表的标准编码
"UTF-8" - Unicode 字符编码。与 ASCII 兼容

请参阅我们的字符集参考手册，获得完整的字符集列表。

技术细节

返回值:	字符串，返回外部脚本文件使用的字符集。

Script defer 属性

实例

检查当页面完成解析时是否执行脚本：

var x = document.getElementById("myScript").defer

x 输出结果为：

true

定义和用法

defer 属性设置或返回当页面完成解析时是否执行脚本。

该属性反映 <script> 标签的 defer 属性。

注意：defer 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

浏览器支持

所有主流浏览器都支持 defer 属性。

注意：Opera 12 及其之前的版本不支持 defer 属性。

语法

返回 defer 属性：

scriptObject.defer

设置 defer 属性：

scriptObject.defer=true|false

属性值

值	描述
true\|false	规定当页面完成解析时是否执行脚本。 true - 当页面完成解析时执行脚本。 false - 当页面完成解析时不执行脚本。

技术细节

返回值：	布尔值，如果当页面完成解析时执行脚本，则返回 true，否则返回 false。

HTML 参考手册：HTML <script> defer 属性

Link hreflang 属性

定义和用法

hreflang 属性规定被链接文档中文本的语言。

语法

设置 hreflang 属性：

linkObject.hreflang="language-code"

返回 hreflang 属性：

linkObject.hreflang

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 hreflang 属性

实例

显示链接文档的语言：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<link id="link1" href="domoarigato.htm" hreflang="ja">
<script>
function displayResult(){
var x=document.getElementById("link1").hreflang;
alert(x);
}
</script>
</head>
<body>

<button type="button" onclick="displayResult()">显示链接元素的文档语言</button>

</body>
</html>

Script src 属性

实例

获取外部脚本的 URL：

var x = document.getElementById("myScript").src

x 输出结果为：

//www.51coolma.cn/jsref/demo_script_src.js

定义和用法

src 属性设置或返回脚本的 src 属性的值。

src 属性规定外部脚本文件的 URL。

如果您希望在网站中的多个页面上运行相同的 JavaScript，就应该创建外部 JavaScript 文件，而不是重复编写相同的脚本。把脚本文件以 .js 扩展名进行保存，然后在 <script> 标签中使用 src 属性引用它。

注意：外部脚本文件不能包含 <script> 标签。

注意：正确地引用您写入脚本的外部脚本文件。

浏览器支持

所有主流浏览器都支持 src 属性。

语法

返回 src 属性：

scriptObject.src

设置 src 属性：

scriptObject.src=URL

属性值

值

描述

URL

外部脚本文件的 URL。

可能的值：

绝对 URL - 指向另一个网站（比如 src="http://www.example.com/example.js" rel="external nofollow" ）
相对 URL - 指向网站内的一个文件（比如 src="/scripts/example.js"）

技术细节

返回值：	字符串，表示外部脚本文件的 URL。返回完整的 URL，包括协议（比如 http://）。

HTML 参考手册：HTML <script> src 属性

引用 cite 属性

引用对象参考手册引用对象

实例

返回一个引用来源:

var x = document.getElementById("myQuote").cite;

x 输出结果为:

http://www.wwf.org

定义与使用

cite 属性用于设置或者返回一个引用的cite属性值。

cite 属性描述了引用的URL源地址。

注意： cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

Browser Support

所有主流浏览器都支持 cite 属性。

语法

返回 cite 属性：

quoteObject.cite

设置 cite 属性：

quoteObject.cite=URL

属性值

值

描述

URL

引用的来源的 URL。

可能的值：

绝对 URL - 指向另一个网站（比如 cite="http://www.example.com"）
相对 URL - 指向网站内的一个页面（比如 cite="example.html"）

技术描述

返回值:	一个字符串, 源文档的URL地址。

实例

修改引用的 cite 属性值:

document.getElementById("myQuote").cite="http://www.cnn.com/";

Select options 集合

Select 对象

定义和用法

option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

注意： 数组中的每个元素对应一个 <option> 标签 - 由 0 起始。

语法

selectObject.options

属性

属性	描述
length	返回集合的option元素数目
selectedIndex	设置或者返回select对象已选选项的索引值。(以 0 起始)

方法

方法	描述
[index]	以数字形式指定元素索引 (以 0 开始)
[add(element[,index])]	在集合中添加option元素
item(index)	以数字索引返回集合中元素
namedItem(name)	以名称为索引返回集合元素
remove(index)	从集合中移除元素

浏览器支持

所有主要浏览器都支持 options 集合

实例

循环输出下拉列表中的所有选项:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
    var x=document.getElementById("mySelect");
    var txt="All options: ";
    var i;
    for (i=0;i<x.length;i++){
        txt=txt + " " + x.options[i].text;
    }
    alert(txt);
}
</script>
</head>
<body>

<form>
你最喜欢的水果:
<select id="mySelect">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示所有选项的文本</button>

</body>
</html>

Array Object 参考手册 JavaScript 数组对象

JavaScript Array 对象

Array 对象

Array 对象用于在变量中存储多个值:

var cars = ["Saab", "Volvo", "BMW"];

第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。

更多有关JavaScript Array参考手册请参考 JavaScript Array 对象手册。

数组属性

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin().	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries().	返回数组的可迭代对象。
every()	检测数组元素的每个元素是否都符合条件。
fill().	使用一个固定值来填充数组。
filter()	检测数组元素，并返回符合条件所有元素的数组。
find().	返回符合传入测试（函数）条件的数组元素。
findIndex().	返回符合传入测试（函数）条件的数组元素索引。
forEach().	数组每个元素都执行一次回调函数。
from().	通过给定的对象中创建一个数组。
indexOf()	搜索数组中的元素，并返回它所在的位置。
join()	把数组的所有元素放入一个字符串。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	反转数组的元素顺序。
shift()	删除数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

JavaScript Boolean 对象

Boolean 对象

Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

Boolean 对象完整教程, 请访问JavaScript Boolean 对象教程。

Boolean 对象属性

属性	描述
constructor	返回对创建此对象的 Boolean 函数的引用
prototype	使您有能力向对象添加属性和方法。

Boolean 对象方法

方法	描述
toString()	把布尔值转换为字符串，并返回结果。
valueOf()	返回 Boolean 对象的原始值。

JavaScript Date 对象

Date 对象

Date 对象用于处理日期与时间。

创建 Date 对象： new Date().

以下四种方法同样可以创建 Date 对象：

var d =new Date();
var d =new Date(milliseconds);
var d =new Date(dateString);
var d =new Date(year, month, day, hours, minutes, seconds, milliseconds);

更完整的日期与实际教程请参照JavaScript Date 对象教程。

Date 对象属性

属性	描述
constructor	返回对创建此对象的 Date 函数的引用。
prototype	使您有能力向对象添加属性和方法。

Date 对象方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()	已废弃。请使用 getFullYear() 方法代替。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()	已废弃。请使用 setFullYear() 方法代替。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	已废弃。请使用 toUTCString() 方法代替。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

JavaScript Math 对象

Math 对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

语法

var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根

Math 对象教程，请参照本站的JavaScript Math 对象教程。

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 E^x 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

JavaScript Number 对象

Number 对象

Number 对象是原始数值的包装对象。

Number 创建方式 new Number()。

语法

var num = new Number(value);

注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

Number 对象属性

属性	描述
constructor	返回对创建此对象的 Number 函数的引用。
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
NaN	非数字值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	允许您有能力向对象添加属性和方法。

Number 对象方法

方法	描述
toExponential(x)	把对象的值转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision(x)	把数字格式化为指定的长度。
toString()	把数字转换为字符串，使用指定的基数。
valueOf()	返回一个 Number 对象的基本数字值。

String 对象

String 对象用于处理文本（字符串）。

String 对象创建方法： new String().

语法

var txt = new String("string");

或者更简单方式：

var txt = "string";

了解 String 对象教程，请查看 JavaScript String 对象教程。

String 对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String 对象方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()	从后向前搜索字符串。
match()	查找找到一个或多个正则表达式的匹配。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
valueOf()	返回某个字符串对象的原始值。

String HTML 包装方法

HTML 包装方法返回加入了适当HTML标签的字符串。

方法	描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
italics()	使用斜体显示字符串。
link()	将字符串显示为链接。
small()	使用小字号来显示字符串。
strike()	用于显示加删除线的字符串。
sub()	把字符串显示为下标。
sup()	把字符串显示为上标。

JavaScript RegExp 对象

RegExp 对象

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠）。比如，以下是等价的：
var re = new RegExp("w+");var re = /w+/;

更多关于 RegExp 对象请阅读我们的JavaScript RegExp 对象教程。

修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
w	查找单词字符。
W	查找非单词字符。
d	查找数字。
D	查找非数字字符。
s	查找空白字符。
S	查找非空白字符。
	匹配单词边界。
B	匹配非单词边界。
	查找 NUL 字符。
	查找换行符。
f	查找换页符。
	查找回车符。
	查找制表符。
v	查找垂直制表符。
xxx	查找以八进制数 xxx 规定的字符。
xdd	查找以十六进制数 dd 规定的字符。
uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

JavaScript 全局

JavaScript 全局属性和方法可用于创建Javascript对象。

JavaScript 全局属性

属性	描述
Infinity	代表正的无穷大的数值。
NaN	指示某个值是不是数字值。
undefined	指示未定义的值。

JavaScript 全局函数

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是否是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

JavaScript 运算符

JavaScript 运算符用于赋值，比较值，执行算术运算等。

JavaScript 算术运算符

算术运算符用于执行两个变量或值的运算。

赋值 y = 5, 以下表格将向你说明算术运算符的使用：

运算符	描述	例子	y 值	x 值	在线实例
+	加法	x = y + 2	y = 5	x = 7	实例 »
-	减法	x = y - 2	y = 5	x = 3	实例 »
*	乘法	x = y * 2	y = 5	x = 10	实例 »
/	除法	x = y / 2	y = 5	x = 2.5	实例 »
%	余数	x = y % 2	y = 5	x = 1	实例 »
++	自增	x = ++y	y = 6	x = 6	实例 »
++	自增	x = y++	y = 6	x = 5	实例 »
--	自减	x = --y	y = 4	x = 4	实例 »
--	自减	x = y--	y = 4	x = 5	实例 »

关于算术运算符，你可以阅读我们的 JavaScript 运算符教程。

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	Same As	x 值	在线实例
=	x = y	x = y	x = 5	实例 »
+=	x += y	x = x + y	x = 15	实例 »
-=	x -= y	x = x - y	x = 5	实例 »
*=	x *= y	x = x * y	x = 50	实例 »
/=	x /= y	x = x / y	x = 2	实例 »
%=	x %= y	x = x % y	x = 0	实例 »

关于赋值运算符，你可以阅读我们的 JavaScript 运算符教程。

JavaScript 字符串运算符

+ 运算符， += 运算符可用于连接字符串。

给定 text1 = "Good ", text2 = "Morning", 及 text3 = "", 下面的表格解释了字符串运算符的使用：

运算符	例子	text1	text2	text3	在线实例
+	text3 = text1 + text2	"Good "	"Morning"	"Good Morning"	实例 »
+=	text1 += text2	"Good Morning"	"Morning"	""	实例 »

比较运算符

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

给定 x=5, 下表展示了比较运算符的使用：

运算符	描述	比较	结果	在线实例
==	等于	x == 8	false	实例 »
==	等于	x == 5	true	实例 »
===	值及类型均相等（恒等于）	x === "5"	false	实例 »
===	值及类型均相等（恒等于）	x === 5	true	实例 »
!=	不等于	x != 8	true	实例 »
!==	值与类型均不等（不恒等于）	x !== "5"	true	实例 »
!==	值与类型均不等（不恒等于）	x !== 5	false	实例 »
>	大于	x > 8	false	实例 »
<	小于	x < 8	true	实例 »
>=	大于或等于	x >= 8	false	实例 »
<=	小于或等于	x <= 8	true	实例 »

关于比较运算符，你可以阅读我们的 JavaScript 比较运算符教程。

条件运算符

条件运算符用于基于条件的赋值运算。

给定 x=6 and y=3, 下表演示了条件运算符的运算：

语法	例子	在线实例
变量 = (条件) ? 值1:值2	voteable = (age & 18) ? "Too young" : "Old enough"	实例 »

逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系。

给定 x=6 and y=3, 以下实例演示了逻辑运算符的使用：

运算符	描述	例子
&&	和	(x < 10 && y > 1) 为 true
\|\|	或	(x == 5 \|\| y == 5) 为 false
!	非	!(x == y) 为 true

JavaScript 位运算符

位运算符工作于32位的数字上。任何数字操作都将转换为32位。结果会转换为 JavaScript 数字。

运算符	描述	例子	类似于	结果	十进制
&	AND	x = 5 & 1	0101 & 0001	0001	1
\|	OR	x = 5 \| 1	0101 \| 0001	0101	5
~	取反	x = ~ 5	~0101	1010	10
^	异或	x = 5 ^ 1	0101 ^ 0001	0100	4
<<	左移/td>	x = 5 << 1	0101 << 1	1010	10
>>	右移	x = 5 >> 1	0101 >> 1	0010	2

实例

返回数组的数目：

array.length

var cars = ["Saab", "Volvo", "BMW"];//定义一个数组console.log(cars.length);//获取该数组的数目并用console打印在控制台

运行结果(按F12开发者工具中的console中查看)：

3

定义和用法

length 属性可设置或返回数组中元素的数目。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持length 属性。

语法

设置数组的数目：

array.length=number

var cars = ["Saab", "Volvo", "BMW"];console.log(cars.length);cars.length=4;//修改数组数目为4console.log(cars.length);//查看数组的数目console.log(cars);//查看这个数组（第四个是empty，也就是空的意思）

运行结果

技术细节

返回值：	一个数字，表示数组中的对象的元素数目。
JavaScript 版本:	1.1

JavaScript 数组对象

Window 对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

Note 注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅对象)
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。请参数 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
screenY	返回相对于屏幕窗口的y坐标
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的父窗口。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

Navigator 对象

Navigator 对象包含有关浏览器的信息。

Note 注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法	描述
javaEnabled()	指定是否在浏览器中启用Java
taintEnabled()	规定浏览器是否启用数据污点(data tainting)

三、实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>W3cschool</title></head><body>	<div id="example"></div><script>txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";txt+= "<p>浏览器名称: " + navigator.appName + "</p>";txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";txt+= "<p>硬件平台: " + navigator.platform + "</p>";txt+= "<p>用户代理: " + navigator.userAgent + "</p>";txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";document.getElementById("example").innerHTML=txt;</script> </body></html>

结果：

浏览器代号: Mozilla

浏览器名称: Netscape

浏览器版本: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

启用Cookies: true

硬件平台: Win32

用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

用户代理语言: undefined

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

Note 注意： 没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

Screen 对象属性

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

Note 注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

Note 注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

Location 对象属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

Location 对象方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

HTML DOM Document 对象

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。

document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

浏览器支持

所有主要浏览器都支持 Document 对象。

Document 对象属性和方法

HTML文档中可以使用以上属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	返回normalizeDocument()被调用时所使用的配置
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document. getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

属性 / 方法	避免的原因
document.attributes	文档没有该属性
document.hasAttributes()	文档没有该属性
document.nextSibling	文档没有下一节点
document.nodeName	这个通常是 #document
document.nodeType	这个通常是 9(DOCUMENT_NODE)
document.nodeValue	文档没有一个节点值
document.ownerDocument	文档没有主文档
document.ownerElement	文档没有自己的节点
document.parentNode	文档没有父节点
document.previousSibling	文档没有兄弟节点
document.textContent	文档没有文本节点

HTML DOM 元素对象

HTML DOM 节点

在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。

元素对象的 子节点可以是, 可以是元素节点，文本节点，注释节点。

NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。

元素可以有属性。属性属于属性节点（查看下一章节）。

浏览器支持

所有主流浏览器都支持元素对象和 NodeList 对象。.

属性和方法

以上属性和方法可适用于所有 HTML 元素：

属性 / 方法	描述
element.accessKey	设置或返回accesskey一个元素
element.addEventListener()	向指定元素添加事件句柄
element.appendChild()	为元素添加一个新的子元素
element.attributes	返回一个元素的属性数组
element.childNodes	返回元素的一个子节点的数组
element.classlist	返回元素的类名，作为 DOMTokenList 对象。
element.className	设置或返回元素的class属性
element.clientHeight	在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.cloneNode()	克隆某个元素
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的内容是否可编辑
element.dir	设置或返回一个元素中的文本方向
element.firstChild	返回元素的第一个子节点
element.focus()	设置文档或元素获取焦点
element.getAttribute()	返回指定元素的属性值
element.getAttributeNode()	返回指定属性节点
element.getElementsByTagName()	返回指定标签名的所有子元素集合。
element. getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
element.getFeature()	返回指定特征的执行APIs对象。
element.getUserData()	返回一个元素中关联键值的对象。
element.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes()	如果元素有任何属性返回true，否则返回false。
element.hasChildNodes()	返回一个元素是否具有任何子元素
element.hasfocus()	返回布尔值，检测文档或元素是否获取焦点
element.id	设置或者返回元素的 id。
element.innerHTML	设置或者返回元素的内容。
element.insertBefore()	现有的子元素之前插入一个新的子元素
element.isContentEditable	如果元素内容可编辑返回 true，否则返回false
element.isDefaultNamespace()	如果指定了namespaceURI 返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等
element.isSameNode()	检查两个元素所有有相同节点。
element.isSupported()	如果在元素中支持指定特征返回 true。
element.lang	设置或者返回一个元素的语言。
element.lastChild	返回的最后一个子元素
element.namespaceURI	返回命名空间的 URI。
element.nextSibling	返回该元素紧跟的一个元素
element.nodeName	返回元素的标记名（大写）
element.nodeType	Returns the node type of an element
element.nodeValue	返回元素的类型
element.normalize()	使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点
element.offsetHeight	返回，任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent	返回元素的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器
element.ownerDocument	返回元素的根元素（文档对象）
element.parentNode	返回元素的父节点
element.previousSibling	返回某个元素紧接之前元素
element.querySelector()	返回匹配指定 CSS 选择器元素的第一个子元素
document.querySelectorAll()	返回匹配指定 CSS 选择器元素的所有子元素节点列表
element.removeAttribute()	从元素中删除指定的属性
element.removeAttributeNode()	删除指定属性节点并返回移除后的节点。
element.removeChild()	删除一个子元素
element.removeEventListener()	移除由 addEventListener() 方法添加的事件句柄
element.replaceChild()	替换一个子元素
element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）
element.setAttribute()	设置或者改变指定属性并指定值。
element.setAttributeNode()	设置或者改变指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	在元素中为指定键值关联对象。
element.style	设置或返回元素的样式属性
element.tabIndex	设置或返回元素的标签顺序。
element.tagName	作为一个字符串返回某个元素的标记名（大写）
element.textContent	设置或返回一个节点和它的文本内容
element.title	设置或返回元素的title属性
element.toString()	一个元素转换成字符串

nodelist.item()	返回某个元素基于文档树的索引
nodelist.length	返回节点列表的节点数目。

HTML DOM 属性对象

HTML DOM 节点

在 HTML DOM (Document Object Model) 中, 所有的都是节点：

文档是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素中的文本为文本节点
注释是注释节点

Attr 对象

在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。

HTML属性总是属于HTML元素。

NamedNodeMap 对象

在 HTML DOM 中, the NamedNodeMap 对象 表示一个无顺序的节点列表。

我们可通过节点名称来访问 NamedNodeMap 中的节点。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 Attr 对象和 NamedNodeMap 对象。

属性 / 方法	描述
attr.isId	如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。
attr.name	返回属性名称
attr.value	设置或者返回属性值
attr.specified	如果属性被指定返回 true，否则返回 false

nodemap.getNamedItem()	从节点列表中返回的指定属性节点。
nodemap.item()	返回节点列表中处于指定索引号的节点。
nodemap.length	返回节点列表的节点数目。
nodemap.removeNamedItem()	删除指定属性节点
nodemap.setNamedItem()	设置指定属性节点(通过名称)

DOM 4 警告 !!!

在 W3C DOM 内核中, Attr (属性) 对象继承节点对象的所有属性和方法。

在 DOM 4 中, Attr (属性) 对象不再从节点对象中继承。

从长远的代码质量来考虑，在属性对象中你需要避免使用节点对象属性和方法:

属性 / 方法	避免原因
attr.appendChild()	属性没有子节点
attr.attributes	属性没有属性
attr.baseURI	使用 document.baseURI 替代
attr.childNodes	属性没有子节点
attr.cloneNode()	使用 attr.value 替代
attr.firstChild	属性没有子节点
attr.hasAttributes()	属性没有属性
attr.hasChildNodes	属性没有子节点
attr.insertBefore()	属性没有子节点
attr.isEqualNode()	没有意义
attr.isSameNode()	没有意义
attr.isSupported()	通常为 true
attr.lastChild	属性没有子节点
attr.nextSibling	属性没有兄弟节点
attr.nodeName	使用 attr.name 替代
attr.nodeType	通常为 2 (ATTRIBUTE-NODE)
attr.nodeValue	使用 attr.value 替代
attr.normalize()	属性没有规范
attr.ownerDocument	通常为你的 HTML 文档
attr.ownerElement	你用来访问属性的 HTML 元素
attr.parentNode	你用来访问属性的 HTML 元素
attr.previousSibling	属性没有兄弟节点
attr.removeChild	属性没有子节点
attr.replaceChild	属性没有子节点
attr.textContent	使用 attr.value 替代

HTML DOM 事件

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行！(如用户点击按钮)。

提示： 在 W3C 2 级 DOM 事件中规范了事件模型。

HTML DOM 事件

DOM： 指明使用的 DOM 属性级别。

鼠标事件

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件句柄。	2
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。	2
onmousedown	鼠标按钮被按下。	2
onmouseenter	当鼠标指针移动到元素上时触发。	2
onmouseleave	当鼠标指针移出元素时触发	2
onmousemove	鼠标被移动。	2
onmouseover	鼠标移到某元素之上。	2
onmouseout	鼠标从某元素移开。	2
onmouseup	鼠标按键被松开。	2

键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下。	2
onkeypress	某个键盘按键被按下并松开。	2
onkeyup	某个键盘按键被松开。	2

框架/对象（Frame/Object）事件

属性	描述	DOM
onabort	图像的加载被中断。 ( <object>)	2
onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发	2
onerror	在加载文档或图像时发生错误。 ( <object>,<body>和 <frameset>)
onhashchange	该事件在当前 URL 的锚部分发生修改时触发。
onload	一张页面或一幅图像完成加载。	2
onpageshow	该事件在用户访问页面时触发
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onresize	窗口或框架被重新调整大小。	2
onscroll	当文档被滚动时发生的事件。	2
onunload	用户退出页面。 (<body> 和 <frameset>)	2

表单事件

属性	描述	DOM
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素获取焦点时触发	2
onfocusin	元素即将获取焦点时触发	2
onfocusout	元素即将失去焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 (<input="search">)
onselect	用户选取文本时触发 ( <input> 和 <textarea>)	2
onsubmit	表单提交时触发	2

剪贴板事件

属性	描述	DOM
oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

打印事件

属性	描述	DOM
onafterprint	该事件在页面已经开始打印，或者打印窗口已经关闭时触发
onbeforeprint	该事件在页面即将开始打印时触发

拖动事件

事件	描述	DOM
ondrag	该事件在元素正在拖动时触发
ondragend	该事件在用户完成元素的拖动时触发
ondragenter	该事件在拖动的元素进入放置目标时触发
ondragleave	该事件在拖动元素离开放置目标时触发
ondragover	该事件在拖动元素在放置目标上时触发
ondragstart	该事件在用户开始拖动元素时触发
ondrop	该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件

事件	描述	DOM
onabort	事件在视频/音频（audio/video）终止加载时触发。
oncanplay	事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough	事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
ondurationchange	事件在视频/音频（audio/video）的时长发生变化时触发。
onemptied	当期播放列表为空时触发
onended	事件在视频/音频（audio/video）播放结束时触发。
onerror	事件在视频/音频（audio/video）数据加载期间发生错误时触发。
onloadeddata	事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
onloadedmetadata	事件在指定视频/音频（audio/video）的元数据加载后触发。
onloadstart	事件在浏览器开始寻找指定视频/音频（audio/video）触发。
onpause	事件在视频/音频（audio/video）暂停时触发。
onplay	事件在视频/音频（audio/video）开始播放时触发。
onplaying	事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress	事件在浏览器下载指定的视频/音频（audio/video）时触发。
onratechange	事件在视频/音频（audio/video）的播放速度发送改变时触发。
onseeked	事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
onseeking	事件在用户开始重新定位视频/音频（audio/video）时触发。
onstalled	事件在浏览器获取媒体数据，但媒体数据不可用时触发。
onsuspend	事件在浏览器读取媒体数据中止时触发。
ontimeupdate	事件在当前的播放位置发送改变时触发。
onvolumechange	事件在音量发生改变时触发。
onwaiting	事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

事件	描述	DOM
animationend	该事件在 CSS 动画结束播放时触发
animationiteration	该事件在 CSS 动画重复播放时触发
animationstart	该事件在 CSS 动画开始播放时触发

过渡事件

事件	描述	DOM
transitionend	该事件在 CSS 完成过渡后触发。

其他事件

事件	描述	DOM
onmessage	该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
onmousewheel	已废弃。使用onwheel 事件替代
ononline	该事件在浏览器开始在线工作时触发。
onoffline	该事件在浏览器开始离线工作时触发。
onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发。
onshow	该事件当 <menu> 元素在上下文菜单显示时触发
onstorage	该事件在 Web Storage(HTML 5 Web 存储)更新时触发
ontoggle	该事件在用户打开或关闭 <details> 元素时触发
onwheel	该事件在鼠标滚轮在元素上下滚动时触发

事件对象

常量

静态变量	描述	DOM
CAPTURING-PHASE	当前事件阶段为捕获阶段(3)	1
AT-TARGET	当前事件是目标阶段,在评估目标事件(1)	2
BUBBLING-PHASE	当前的事件为冒泡阶段 (2)	3

属性

属性	描述	DOM
bubbles	返回布尔值，指示事件是否是起泡事件类型。	2
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。	2
currentTarget	返回其事件监听器触发该事件的元素。	2
eventPhase	返回事件传播的当前阶段。	2
target	返回触发此事件的元素（事件的目标节点）。	2
timeStamp	返回事件生成的日期和时间。	2
type	返回当前 Event 对象表示的事件的名称。	2

方法

方法	描述	DOM
initEvent()	初始化新创建的 Event 对象的属性。	2
preventDefault()	通知浏览器不要执行与事件关联的默认动作。	2
stopPropagation()	不再派发事件。	2

目标事件对象

方法

方法	描述	DOM
addEventListener()	允许在目标事件中注册监听事件(IE8= attachEvent())	2
dispatchEvent()	允许发送事件到监听器上 (IE8 =fireEvent())	2
removeEventListener()	运行一次注册在事件目标上的监听事件(IE8 =detachEvent())	2

事件监听对象

方法

方法	描述	DOM
handleEvent()	把任意对象注册为事件处理程序	2

文档事件对象

方法

方法	描述	DOM
createEvent()		2

鼠标/键盘事件对象

属性

属性	描述	DOM
altKey	返回当事件被触发时，"ALT" 是否被按下。	2
button	返回当事件被触发时，哪个鼠标按钮被点击。	2
clientX	返回当事件被触发时，鼠标指针的水平坐标。	2
clientY	返回当事件被触发时，鼠标指针的垂直坐标。	2
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。	2
Location	返回按键在设备上的位置	3
charCode	返回onkeypress事件触发键值的字母代码。	2
key	在按下按键时返回按键的标识符。	3
keyCode	返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	2
which	返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	2
metaKey	返回当事件被触发时，"meta" 键是否被按下。	2
relatedTarget	返回与事件的目标节点相关的节点。	2
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。	2
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。	2
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。	2

方法

方法	描述	W3C
initMouseEvent()	初始化鼠标事件对象的值	2
initKeyboardEvent()	初始化键盘事件对象的值	3

HTML DOM Anchor 对象

Anchor 对象

Anchor 对象表示 HTML 超链接。

在 HTML 文档中 <a> 标签每出现一次，就会创建 Anchor 对象。

锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。

您可以通过搜索 Document 对象中的 anchors[] 数组来访问锚，或者使用 document.getElementById()。

Anchor 对象属性

W3C： W3C 标准。

属性	描述	W3C
charset	设置或返回被链接资源的字符集。	Yes
href	设置或返回被链接资源的 URL。	Yes
hreflang	设置或返回被链接资源的语言代码。	Yes
name	设置或返回一个链接的名称。	Yes
rel	设置或返回当前文档与目标 URL 之间的关系。	Yes
rev	设置或返回目标 URL 与之间当前文档的关系。	Yes
target	设置或返回在何处打开链接。	Yes
type	设置或返回被链接资源的 MIME 类型。	Yes

标准属性和事件

Anchor 对象同样支持标准属性和事件。

HTML DOM Area 对象

Area 对象

Area 对象代表图像映射的一个区域（图像映射指的是带有可点击区域的图像）

在 HTML 文档中 <area> 标签每出现一次，就会创建一个 Area 对象。

Area 对象属性

W3C： W3C 标准：

属性	描述	W3C
alt	设置或返回当浏览器无法显示某个区域时的替换文字。	Yes
coords	设置或返回图像映射中可点击区域的坐标。	Yes
hash	设置或返回某个区域中 URL 的锚部分。	Yes
host	设置或返回某个区域中 URL 的主机名和端口。	Yes
hostname	设置或返回href属性值得主机部分。	Yes
href	设置或返回某个区域中href属性值	Yes
noHref	设置或者返回某个区域的 nohref 属性值。	Yes
pathname	设置或者返回某个区域 href 属性值的路径名部分。	Yes
port	设置或者返回某个区域 href 属性值的端口部分。	Yes
protocol	设置或者返回某个区域 href 属性值的协议部分。	Yes
search	设置或者返回某个区域 href 属性值的查询字符串部分。	Yes
shape	设置或者返回某个区域 shape属性值。	Yes
target	设置或者返回某个区域 target 属性值。	Yes

标准属性和事件

Area 对象同样支持标准的属性和事件.

HTML DOM Audio 对象

Audio 对象

Audio 对象sHTML5中新增的。。

Audio 对象代表着 HTML <audio> 元素。

访问 Audio 对象

你可以使用getElementById()来访问 <audio> 元素：

var x = document.getElementById("myAudio");尝试一下

创建 Audio 对象

你可以使用document.createElement()方法创建 <audio> 元素:

var x = document.createElement("AUDIO");尝试一下

Audio 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频
buffered	返回表示音频已缓冲部分的 TimeRanges 对象
controller	返回表示音频当前媒体控制器的 MediaController 对象
controls	设置或返回音频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频的 CORS 设置
currentSrc	回当前音频的 URL
currentTime	设置或返回音频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频默认是否静音
defaultPlaybackRate	设置或返回音频的默认播放速度
duration	返回当前音频的长度（以秒计）
ended	返回音频的播放是否已结束
error	返回表示音频错误状态的 MediaError 对象
loop	设置或返回音频是否应在结束时重新播放
mediaGroup	设置或返回音频所属的组合（用于连接多个音频元素）
muted	设置或返回音频是否静音
networkState	返回音频的当前网络状态
paused	设置或返回音频是否暂停
playbackRate	设置或返回音频播放的速度
played	返回表示音频已播放部分的 TimeRanges 对象
preload	设置或返回音频是否应该在页面加载后进行加载
readyState	返回音频当前的就绪状态
seekable	返回表示音频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频中进行查找
src	设置或返回音频元素的当前来源
textTracks	返回表示可用文本轨道的 TextTrackList 对象
volume	设置或返回音频的音量

Audio 对象方法

方法	描述
addTextTrack()	在音频中添加一个新的文本轨道
canPlayType()	检查浏览器是否可以播放指定的音频类型
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回一个新的Date对象，表示当前时间轴偏移量
load()	重新加载音频元素
play()	开始播放音频
pause()	暂停当前播放的音频

标准属性和事件

Canvas 对象同样支持标准属性和事件。

HTML 教程: HTML5 audio

HTML 参考手册: HTML <audio> 标签

HTML 音频/视频 DOM 参考手册: HTML 音频/视频

HTML DOM Object 对象

Object 对象

Object 对象表示一个 HTML <object> 元素。

访问 Object 对象

您可以使用 getElementById() 来访问 <object> 元素：

varx = document.getElementById("myObject");尝试一下

创建 Object 对象

您可以使用 document.createElement() 方法来创建 <object> 元素：

var x = document.createElement("OBJECT");尝试一下

Object 对象属性

属性	描述
align	HTML5 中不支持。使用style.cssFloat 替代。设置或返回对象相对于周围文本的对齐方式。
archive	HTML5 中不支持。设置或返回一个用于实现对象存档功能的字符串。
border	HTML5 中不支持。使用style.border 替代。设置或返回围绕对象的边框。
code	HTML5 中不支持。设置或返回文件的 URL，该文件包含已编译的 Java 类。
codeBase	HTML5 中不支持。设置或返回组件的 URL。
codeType	HTML5 中不支持。
data
declare	HTML5 中不支持。
form	返回对对象的父表单的引用。
height	设置或返回对象的高度。
hspace	HTML5 中不支持。使用style.margin 替代。设置或返回对象的水平外边距。
name	设置或返回对象的名称。
standby	HTML5 中不支持。设置或返回在加载对象时的消息。
type	设置或返回通过 data 属性下载的数据的内容类型。
useMap
vspace	HTML5 中不支持。使用style.margin 替代。设置或返回对象的垂直外边距。
width	设置或返回对象的宽度。

标准属性和事件

Object 对象同样支持标准属性和事件。

HTML 参考手册：HTML <object> 标签

HTML DOM Blockquote 对象

Blockquote 对象

Blockquote 对象代表着一个 HTML 引用(blockquote)块元素。

<blockquote> 标签定义摘自另一个源的块引用。

一个 <blockquote> 元素的内容通常展现为一个左、右两边进行缩进的段落。

在 HTML 文档中的每一个 <blockquote> 标签创建时，都会创建一个 Blockquote 对象。

Blockquote 对象属性

属性	描述
cite	设置或返回一个引用的cite属性值

标准属性和事件

Blockquote 对象支持标准属性和事件。

HTML 参考手册: HTML <blockquote> 标签

JavaScript reference: HTML DOM Quote 对象

HTML DOM Body 对象

Body Object

Body 对象代表了 HTML body 元素。

Body 对象代表文档的主体 (HTML body) 。

body 元素包含了所有的 HTML 文档，如文本，超级链接，图片，表格，列表，等等。

Body 对象属性

W3C: W3C 标准。

属性	描述	W3C
aLink	设置或者返回主体元素的 alink 属性。	Yes
background	设置或者返回body元素的 background 属性。	Yes
bgColor	设置或者返回body元素的 bgColor 属性。	Yes
link	设置或者返回主体元素的 link 属性。	Yes
text	设置或者返回主体元素的 text 属性。	Yes
vLink	设置或者返回主体元素的 vLink 属性。	Yes

Body 对象事件

事件	描述	W3C
onload	脚本在页面完全载入后会被立即执行。	Yes

标准属性和事件

Body 对象同样支持标准的属性和事件。

HTML DOM Button 对象

Button 对象

Button 对象代表一个按钮。

在 HTML 文档中 <button> 标签每出现一次，Button 对象就会被创建。

在 HTML button 元素中你可以添加内容，如文本或者图片，这是与input 按钮（button）类型的不同之处。

Button 对象属性。

W3C: W3C 标准。

属性	描述	W3C
disabled	设置或返回是否禁用按钮。	Yes
form	返回对包含按钮的表单的引用。	Yes
name	设置或返回按钮的名称。	Yes
type	返回按钮的表单类型。	Yes
value	设置或返回显示在按钮上的文本。	Yes

标准属性和事件

Button 对象同样支持标准的属性和事件。

HTML DOM Canvas 对象

Canvas 对象

Canvas 对象是 HTML5 中新增的。

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

访问 Canvas 对象

您可以使用 getElementById() 来访问 <canvas> 元素：

var x = document.getElementById("myCanvas");尝试一下

创建 Canvas 对象

您可以使用 document.createElement() 方法来创建 <canvas> 元素：

var x = document.createElement("CANVAS");尝试一下

注意：<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的模糊级别。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）。
createPattern()	在指定的方向上重复指定的元素。
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。
addColorStop()	规定渐变对象中的颜色和停止位置。

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	设置或返回当前的线条宽度。
miterLimit	设置或返回最大斜接长度。

矩形

方法	描述
rect()	创建矩形。
fillRect()	绘制"被填充"的矩形。
strokeRect()	绘制矩形（无填充）。
clearRect()	在给定的矩形内清除指定的像素。

路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc()	创建弧/曲线（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

转换

方法	描述
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

文本

属性	描述
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	描述
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频。

像素操作

属性	描述
width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

方法	描述
createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

其他

方法	描述
save()	保存当前环境的状态。
restore()	返回之前保存过的路径状态和属性。
createEvent()
getContext()
toDataURL()

标准属性和事件

Canvas 对象同样支持标准属性和事件。

HTML 参考手册：HTML <canvas> 标签

HTML DOM Column 对象

Column 对象

Column 对象是HTML table（表格）中的列。

在每个HTML文档的 <col> 标签中，都可以创建Column对象。

<col> 元素描述了在 <colgroup> 元素中的每个列属性。

如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

Column对象属性

属性	描述
span	设置或者返回列中span属性的值。

标准属性和事件

Column 对象同样支持标准属性和事件.

HTML DOM Columngroup 对象

Columngroup 对象

Columngroup 对象代表着HTML表格（table）的一组列。

在HTML文档中每个 <colgroup> 标签，都会创建一个 Columngroup 对象。

如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。<colgroup> 标签只能在 table 元素中使用。

Columngroup 对象属性

属性	描述
span	设置或者返回列组中span属性的值。

标准属性和事件

Columngroup 对象同样支持标准属性和事件。

HTML tutorial: HTML 表格

HTML reference: HTML <colgroup> 标签

JavaScript reference: HTML DOM Column 对象

HTML DOM Datalist 对象

Datalist 对象

The Datalist 对象是HTML5新增的。

Datalist 对象代表 HTML <datalist> 元素。

访问 Datalist 对象

你可以使用 getElementById() 函数来访问 <datalist> 元素：

varx = document.getElementById("myDatalist");尝试一下

创建 Datalist 对象

你可以使用 document.createElement() 方法来创建 <datalist> 元素:

var x = document.createElement("DATALIST");尝试一下

Datalist 对象集合

集合	描述
options	返回 datalist 中所有选项的集合

标准属性和事件

Datalist 对象同样支持标准属性和事件。

HTML DOM del 对象

del 对象

del 对象代表了HTML文档中已被删除的文本。

<del> 元素定义文档中已被删除的文本。

<del> 元素经常与 <ins> 元素一起使用，来展示不同风格的旧内容与新内容。浏览器上会在两个标签上的内容加上横线及下划线来区别内容。

在 HTML 文档中每个 <del> 标签都能创建 del 对象。

del 对象属性

属性	描述
cite	设置或者返回删除文本的cite属性值
dateTime	设置或者返回删除文本的dateTime属性值

标准属性和事件

del 对象同样支持标准属性和事件。

HTML DOM Details 对象

Details 对象

Details 对象表示一个 HTML <details> 元素。

访问 Details 对象

你可以使用 getElementById() 访问 <details> 元素:

varx = document.getElementById("myDetails");尝试一下

Create a Details Object

You can create a <details> element by using the document.createElement() method:

var x = document.createElement("DETAILS");尝试一下

Details 对象属性

属性	描述
open	设置或者返回 details 标签内的描述信息是否显示。

标准属性和事件

Details 对象同样支持标准的属性和事件。

HTML 参考手册: HTML <details> 标签

HTML DOM Dialog 对象

Dialog 对象

Dialog 对象是HTML5新增的。

Dialog 对象表示 HTML <dialog> 元素。

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 <dialog> 元素。

访问 Dialog 对象

你可以使用 getElementById() 访问 <dialog> 元素：

var x = document.getElementById("myDialog");尝试一下

创建 Dialog 对象

你可以使用 document.createElement() 方法创建 <dialog> 元素：

var x = document.createElement("DIALOG");尝试一下

Dialog 对象属性

属性	描述
open	设置或者返回对话窗口是否打开
returnValue	设置或者返回 dialog 的返回值

Dialog 对象方法

方法	描述
close()	关闭对话窗口
show()	显示的对话框
showModal()	显示对话框，并使其成为最顶层的对话框

标准属性和事件

Dialog 对象同样支持标准属性和事件。

HTML 参考手册: HTML <dialog> 标签

HTML DOM Embed 对象

Embed 对象

Embed 对象是 HTML5 中新增的。

Embed 对象代表一个 HTML <embed> 元素。

访问 Embed 对象

你可以使用 getElementById() 来访问 <embed> 元素:

varx = document.getElementById("myEmbed");尝试一下

创建 Embed 对象

你可以使用 document.createElement() 来创建 <embed> 元素：

var x = document.createElement("myEmbed");尝试一下

Embed 对象属性

Property	描述
height	设置或者返回嵌入文件的高度（height属性值）
src	设置或者返回 embed 元素的 src 属性值（嵌入文件地址）
type	设置或者返回 embed 元素的 type 属性值（嵌入文件类型）
width	设置或者返回嵌入文件的宽度（width属性值）

标准属性和事件

Embed 对象同样支持标准属性和事件。

HTML 参考手册: HTML <embed> 标签

HTML DOM Fieldset 对象

Fieldset 对象

Fieldset 对象表示一个 HTML <fieldset> 元素。

访问 Fieldset 对象

您可以使用 getElementById() 来访问 <fieldset> 元素：

varx = document.getElementById("myFieldset");尝试一下

提示：您也可以通过搜索表单的 elements 集合来访问 Fieldset 对象。

创建 Fieldset 对象

您可以使用 document.createElement() 方法来创建 <fieldset> 元素：

var x = document.createElement("myFieldset");尝试一下

Fieldset 对象属性

= HTML5 中新增的属性。

属性	描述
disabled	设置或返回是否禁用 fieldset。
form	返回一个包含 fieldset 的表单的引用。
name	设置或返回 fieldset 的 name 属性的值。
type	返回 fieldset 是哪一个类型的表单元素。

标准属性和事件

Fieldset 对象同样支持标准属性和事件。

HTML 教程：HTML 表单

HTML 参考手册：HTML <fieldset> 标签

HTML DOM Form 对象

Form 对象

Form 对象代表一个 HTML 表单。

在 HTML 文档中 <form> 每出现一次，Form 对象就会被创建。

表单用于向服务端发送数据。

Form 对象收集

W3C: W3C 标准。

集合	描述	W3C
elements[]	包含表单中所有元素的数组。	Yes

Form 对象属性

属性	描述	W3C
acceptCharset	服务器可接受的字符集。	Yes
action	设置或返回表单的 action 属性。	Yes
enctype	设置或返回表单用来编码内容的 MIME 类型。	Yes
length	返回表单中的元素数目。	Yes
method	设置或返回将数据发送到服务器的 HTTP 方法。	Yes
name	设置或返回表单的名称。	Yes
target	设置或返回表单提交结果的 Frame 或 Window 名。	Yes

Form 对象方法

方法	描述	W3C
reset()	重置一个表单	Yes
submit()	提交一个表单	Yes

Form 对象事件

事件	描述	W3C
onreset	在重置表单元素之前调用。	Yes
onsubmit	在提交表单之前调用。	Yes

标准属性和事件

Form 对象同样支持标准的属性和事件。

HTML DOM Frame 和 IFrame 对象

Frame 对象

Frame 对象代表一个 HTML 框架。

<frame>标签定义了在框架中一个特定的窗口（框架）。

在 HTML 文档中 <frame> 每出现一次，就会创建一个 Frame对象。

IFrame 对象

IFrame 对象代表一个 HTML 的内联框架。

在 HTML 文档中 <iframe> 每出现一次，一个 IFrame 对象就会被创建。

Frame/IFrame 对象属性

W3C: W3C 标准。

属性	描述	W3C
align	根据周围的文字排列 iframe。	Yes
contentDocument	容纳框架的内容的文档。返回 frame/iframe 生成的文档对象。	Yes
contentWindow	返回 frame/iframe 生成的 window 对象。	No
frameBorder	设置或返回是否显示框架周围的边框。	Yes
height	设置或返回 iframe 的高度。	Yes
longDesc	设置或返回指向包含框架内容描述文档的 URL。	Yes
marginHeight	设置或返回 iframe 的顶部和底部的页空白。	Yes
marginWidth	设置或返回 frame/iframe 的左侧和右侧的页空白。	Yes
name	设置或返回 frame/iframe 的名称。	Yes
noResize	设置或返回框架是否可调整大小。	Yes
scrolling	设置或返回框架是否可拥有滚动条。	Yes
src	设置或返回应被加载到框架中的文档的 URL。	Yes
width	设置或返回 iframe 的宽度。	Yes

Frame/IFrame 对象事件

事件	描述	W3C
onload	当框架载入后立即执行脚本。	Yes

标准属性和事件

Frame/IFrame 对象同样支持标准的属性和事件。

HTML DOM Frameset 对象

Frameset 对象

Frameset 对象代表 HTML 框架集。

HTML frameset 元素拥有两个或者更多的 frame 元素。每个frame 元素拥有一个单独的文件。/p>

HTML frameset 元素规定框架集只有几行或列会。

Frameset 对象属性

W3C: W3C 标准。

属性	描述	W3C
cols	设置或返回框架集中列的数目。	Yes
rows	设置或返回框架集中行的数目。	Yes

Frameset 对象事件

事件	描述	W3C
onload	在页面载入完成后立即执行脚本。	Yes

标准属性和事件

Frameset 对象同样支持标准的属性和事件。

HTML DOM Image 对象

Image 对象

Image 对象代表嵌入的图像。

<img> 标签每出现一次，一个 Image 对象就会被创建。

Image 对象属性

W3C: W3C 标准。

属性	描述	W3C
align	设置或返回与内联内容的对齐方式。	Yes
alt	设置或返回无法显示图像时的替代文本。	Yes
border	设置或返回图像周围的边框。	Yes
complete	返回浏览器是否已完成对图像的加载。	No
height	设置或返回图像的高度。	Yes
hspace	设置或返回图像左侧和右侧的空白。	Yes
longDesc	设置或返回指向包含图像描述的文档的 URL。	Yes
lowsrc	设置或返回指向图像的低分辨率版本的 URL。	No
name	设置或返回图像的名称。	Yes
src	设置或返回图像的 URL。	Yes
useMap	设置或返回客户端图像映射的 usemap 属性的值。	Yes
vspace	设置或返回图像的顶部和底部的空白。	Yes
width	设置或返回图像的宽度。	Yes

Image 对象事件

事件	描述	W3C
onabort	当用户放弃图像的装载时调用的事件句柄。	Yes
onerror	在装载图像的过程中发生错误时调用的事件句柄。	Yes
onload	当图像装载完毕时调用的事件句柄。	Yes

标准属性和事件

Image 对象同样支持标准的属性和事件。

HTML DOM ins 对象

ins 对象

ins 对象代表了一个已经被插入HTML文档中的文本。

<ins> 元素定义已经被插入文档中的文本。

提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

在HTML文档中每个 <ins> 标签都能创建 ins 对象。

ins 对象属性

属性	描述
cite	设置或者返回插入文本的cite属性值。
dateTime	设置或者返回删除文本的插入属性值

标准属性和事件

ins 对象同样支持标准属性和事件。

HTML DOM Button 对象

Button 对象

Button 对象代表 HTML 文档中的一个按钮。

该元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。

在 HTML 文档中 <input type="button"> 标签每出现一次，一个 Button 对象就会被创建。

您可以通过遍历表单的 elements[] 数组来访问某个按钮，或者通过使用 document.getElementById()。

Button 对象属性

W3C: W3C 标准。

属性	描述	W3C
disabled	设置或返回是否禁用按钮。	Yes
form	返回对包含该按钮的表单对象的引用。	Yes
name	设置或返回按钮的名称。	Yes
type	返回按钮的表单元素类型。	Yes
value	设置或返回在按钮上显示的文本。	Yes

标准属性和事件

Button 对象同样支持标准的属性和事件。

HTML DOM Checkbox 对象

Checkbox 对象

Checkbox 对象代表一个 HTML 表单中的一个选择框。

在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。

您可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById() 。

Checkbox 对象属性

W3C: W3C 标准。

属性	描述	W3C
disabled	设置或返回 checkbox 是否应被禁用。	Yes
checked	设置或返回 checkbox 是否应被选中。	Yes
defaultChecked	返回 checked 属性的默认值。	Yes
form	返回对包含 checkbox 的表单的引用。	Yes
name	设置或返回 checkbox 的名称。	Yes
type	返回 checkbox 的表单元素类型。	Yes
value	设置或返回 checkbox 的 value 属性的值	Yes

标准属性和事件

Checkbox 对象同样支持标准的属性和事件。

HTML DOM Input Color 对象

Input Color 对象

Input Color 对象是 HTML5 新增的。

Input Color 对象代表了使用 type="color"属性的 HTML <input> 元素。

注意： Internet Explorer 或 Safari浏览器不支持 <input> 元素使用 type="color" 属性。

访问 Input Color 对象

你可以使用 getElementById() 函数来访问使用 type="color" 属性的 <input> 元素:

var x = document.getElementById("myColor");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Color 对象。

创建 Input Color 对象

你可以使用 document.createElement() 方法来创建使用 type="color" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "color");尝试一下

Input Color 对象属性

属性	描述
autocomplete	设置或者返回拾色器的 autocomplete 属性值。
autofocus	设置或者返回在页面加载时拾色器是否获取焦点。
defaultValue	设置或返回拾色器默认的值。
disabled	设置或返回拾色器是否可用。
form	返回包含拾色器的 form 表单引用。
list	返回包含拾色器的 datalist 引用。
name	设置或者返回拾色器 name 属性值。
type	返回拾色器的表单元素类型。
value	设置或者返回拾色器的 value 属性值。

标准属性和事件

Input Color 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Date 对象

Input Date 对象

Input Date 对象是 HTML5 新增的。

Input Date 对象表示使用了 type="date" 属性的 HTML <input> 元素。

注意：Internet Explorer 或 Firefox 不支持用 type="date" 属性的 <input> 元素。

访问 Input Date 对象

你可以用个使用 getElementById() 函数来访问使用 type="date" 属性的 <input> 元素 :

var x = document.getElementById("myDate");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Date 对象。

创建 Input Date 对象

你可以使用 document.createElement() 方法来创建使用 type="date" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "date");尝试一下

Input Date 对象属性

Property	描述
autocomplete	设置或返回日期字段的 autocomplete 属性值
autofocus	设置或返回日期字段在页面加载后是否自动获取焦点
defaultValue	设置或返回日期字段默认的值
disabled	设置或返回日期字段是否可用
form	返回使用日期字段的表单引用
list	返回包含了日期字段的 datalist 引用
max	设置或返回日期字段的 max 属性值
min	设置或返回日期字段的 min 属性值
name	设置或返回日期字段的 name 属性值
readOnly	设置或返回日期字段是否只读
required	设置或返回日期字段在表单中是否为必填字段
step	设置或返回日期字段的 step 属性值
type	返回日期字段的表单类型
value	设置或返回日期字段的 value 属性值

标准属性和事件

Input Date 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Datetime 对象

Input Datetime 对象

Input Datetime 对象是 HTML5 新增的。

Input Datetime 对象表示使用 type="datetime" 属性的HTML <input> 元素。

注意： Internet Explorer, Firefox, Opera 15 (及更高版本) 或 Chrome 支持 <input> 元素使用 type="datetime"。

访问 Input Datetime 对象

你可以使用 getElementById() 函数来访问使用 type="datetime" 属性的 <input> 元素:

var x = document.getElementById("myDatetime");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Datetime 对象。

创建 Input Datetime 对象

你可以使用 document.createElement() 方法来创建使用 type="datetime" 属性的 <input> 元素:

var x = document.createElement("INPUT");
x.setAttribute("type", "datetime");尝试一下

Input Datetime 对象属性

Property	描述
autocomplete	设置或返回 datetime 字段的 autocomplete 属性值
autofocus	设置或返回 datetime 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 datetime 字段默认的值
disabled	设置或返回 datetime 字段是否被禁用
form	返回使用 datetime 字段的表单引用
list	返回包含了 datetime 字段的 datalist 引用
max	设置或返回 datetime 字段的 max 属性值
min	设置或返回 datetime 字段的 min 属性值
name	设置或返回 datetime 字段的 name 属性值
readOnly	设置或返回 datetime 字段是否只读
required	设置或返回 datetime 字段在表单中是否为必填字段
step	设置或返回 datetime 字段的 step 属性值
type	返回 datetime 字段的表单元素类型
value	设置或返回 datetime 字段的 value 属性值

标准属性和事件

Input Datetime 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input DatetimeLocal 对象

Input DatetimeLocal 对象

Input DatetimeLocal 对象是 HTML5 新增的。

Input DatetimeLocal 对象表示使用 type="datetime-local" 的 HTML <input> 元素。

注意：Internet Explorer 或 Firefox 浏览器不支持 <input> 元素。

访问 Input DatetimeLocal 对象

你可以使用 getElementById() 函数来访问使用 type="datetime-local" 属性的 <input> 元素:

var x = document.getElementById("myLocalDate");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input DatetimeLocal 对象。

创建 Input DatetimeLocal 对象

你可以使用 document.createElement() 方法来创建使用 type="datetime-local" 属性的 <input> 元素:

var x = document.createElement("INPUT");
x.setAttribute("type", "datetime-local");尝试一下

Input DatetimeLocal 对象属性

属性	描述
autocomplete	设置或返回本地时间字段的 autocomplete 属性值
autofocus	设置或返回本地时间字段在页面加载后是否自动获取焦点
defaultValue	设置或返回本地时间字段默认的值
disabled	设置或返回本地时间字段是否可用
form	返回使用本地时间字段的表单引用
list	返回包含了本地时间字段的 datalist 引用
max	设置或返回本地时间字段的 max 属性值
min	设置或返回本地时间字段的 min 属性值
name	设置或返回本地时间字段的 name 属性值
readOnly	设置或返回本地时间字段是否只读
required	设置或返回本地时间字段在表单中是否为必填字段
step	设置或返回本地时间字段的 step 属性值
type	返回本地时间字段的表单元素类型
value	设置或返回本地时间字段的 value 属性值

标准属性和事件

Input DatetimeLocal 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Email 对象

Input Email 对象

Input Email 对象是 HTML5 新增的。

Input DatetimeLocal 对象表示使用 type="email" 的 HTML <input> 元素。

注意： Internet Explorer 9 (及更早IE版本), 或 Safari 浏览器不支持使用 type="email" 的 HTML <input> 元素。

访问 Input Email 对象

你可以使用 getElementById() 函数来访问使用 type="email" 属性的 <input> 元素:

var x = document.getElementById("myEmail");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Email 对象。

创建 Input Email 对象

你可以使用 document.createElement() 方法来创建使用 type="email" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "email");尝试一下

Input Email 对象属性

属性	描述
autocomplete	设置或返回 email 字段的 autocomplete 属性值
autofocus	设置或返回 email 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 email 字段默认的值
disabled	设置或返回 email 字段是否可用
form	返回使用 email 字段的表单引用
list	返回包含了 email 字段的 datalist 引用
maxLength	设置或返回 email 字段的 maxlength 属性值
multiple	设置或返回 email 字段是否可以输入多个邮箱地址
name	设置或返回 email 字段的 name 属性值
pattern	设置或者返回 email 字段的 pattern 属性值
placeholder	设置或者返回 email 字段的 placeholder 属性值
readOnly	设置或返回 email 字段是否只读
required	设置或返回 email 字段在表单中是否为必填字段
step	设置或返回 email 字段的 step 属性值
type	返回 email 字段的表单元素类型
value	设置或返回 email 字段的 value 属性值

标准属性和事件

Input Email 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM FileUpload 对象

FileUpload 对象

在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。

该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。

您可以通过遍历表单的 elements[] 数组，或者通过使用 document.getElementById()来访问 FileUpload 对象。

FileUpload 对象属性

W3C: W3C 标准。

属性	描述	W3C
disabled	设置或返回是否禁用 FileUpload 对象。	Yes
accept	设置或返回指示文件传输的 MIME 类型的列表（逗号分隔）。	Yes
form	返回对包含 FileUpload 对象的表单的引用。	Yes
name	设置或返回 FileUpload 对象的名称。	Yes
type	返回表单元素的类型。对于 FileUpload ，则是 "file" 。	Yes
value	返回由用户输入设置的文本后，FileUpload 对象的文件名。	Yes

标准属性和事件

FileUpload 对象同样支持标准的属性和事件。

HTML DOM Hidden 对象

Hidden 对象

Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。

在 HTML 表单中 <input type="hidden"> 标签每出现一次，一个 Hidden 对象就会被创建。

您可通过遍历表单的 elements[] 数组来访问某个隐藏输入域，或者通过使用document.getElementById()。

Hidden 对象属性

W3C: W3C 标准。

属性	描述	W3C
form	返回一个对包含隐藏域的表单的引用。	Yes
name	设置或返回隐藏域的名称。	Yes
type	返回隐藏输入域的表单类型。	Yes
value	设置或返回隐藏域的 value 属性的值。	Yes

标准属性和事件

Hidden 对象同样支持标准的属性和事件。

HTML DOM Input Image 对象

Input Image 对象

Input Image 对象表示使用 type="image"元素的 HTML <input> 元素。

访问Input Image 对象

你可以使用 getElementById() 函数来访问使用 type="image" 属性的 <input> 元素:

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

提示： 你同样可以通过表单的元素集合来访问 Input Datetime 对象。

创建 Input Image 对象

你可以使用 document.createElement() 方法来创建使用 type="image" 属性的 <input> 元素:

var x = document.createElement("INPUT");
x.setAttribute("type", "image");

Input Image 对象属性

= HTML5新增属性。

Property	描述
alt	设置或返回 input image 的 alt 属性值
autofocus	设置或返回 input image 是否在页面加载后自动获取焦点
defaultValue	设置或返回 input image 默认值
disabled	设置或返回 input image 是否被禁用
form	返回包含 input image 的表单引用
formAction	设置或返回 input image 的 formaction 属性值
formEnctype	设置或返回 input image 的 formenctype 属性值
formMethod	设置或返回 input image 的 formmethod 属性值
formNoValidate	设置或返回 form-data 在提交时是否应该验证
formTarget	设置或返回 input image 的 formtarget 属性值
height	设置或返回 input image 的 height 属性值
name	设置或返回 input image 的 name 属性值
src	设置或返回 input image 的 src 属性值
type	返回 input image 的表单元素类型
value	设置或返回 input image 的 value 属性值
width	设置或返回 input image 的 width 属性值

标准属性和事件

Input Datetime 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Month 对象

Input Month 对象

Input Month 对象是 HTML5 新增的。

Input Month 对象表示使用type="month" 的 HTML <input> 元素。

注意：Internet Explorer 或 Firefox 浏览器不支持使用 type="month" 属性的 <input> 元素。

访问 Input Month 对象

你可以使用 getElementById() 函数来访问使用 type="month" 属性的 <input> 元素:

var x = document.getElementById("myMonth");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Month 对象。

创建 Input Month 对象

你可以使用 document.createElement() 方法来创建使用 type="month" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "month");尝试一下

Input Month 对象属性

属性	描述
autocomplete	设置或返回 month 字段的 autocomplete 属性值
autofocus	设置或返回 month 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 month 字段默认的值
disabled	设置或返回 month 字段是否可用
form	返回使用 month 字段的表单引用
list	返回包含了 month 字段的 datalist 引用
max	设置或返回 month 字段的 max 属性值
min	设置或返回 month 字段的 min 属性值
name	设置或返回 month 字段的 name 属性值
readOnly	设置或返回 month 字段是否只读
required	设置或返回 month 字段在表单中是否为必填字段
step	设置或返回 month 字段的 step 属性值
type	返回 month 字段的表单元素类型
value	设置或返回 month 字段的 value 属性值

标准属性和事件

Input Month 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Number 对象

Input Number 对象

Input Number 对象是 HTML5 新增的。

Input Number 对象表示使用type="number" 的 HTML <input> 元素。

注意：Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

访问 Input Number 对象

你可以使用 getElementById() 函数来访问使用 type="number" 属性的 <input> 元素:

var x = document.getElementById("myNumber");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Number 对象。

创建 Input Number 对象

你可以使用 document.createElement() 方法来创建使用 type="number" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "number");尝试一下

Input Number 对象属性

属性	描述
autocomplete	设置或返回 number 字段的 autocomplete 属性值
autofocus	设置或返回 number 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 number 字段默认的值
disabled	设置或返回 number 字段是否可用
form	返回使用 number 字段的表单引用
labels	返回 number 字段的标签元素列表
list	返回包含了 number 字段的 datalist 引用
max	设置或返回 number 字段的 max 属性值
min	设置或返回 number 字段的 min 属性值
name	设置或返回 number 字段的 name 属性值
placeholder	设置或返回 number 字段的 placeholder 属性值
readOnly	设置或返回 number 字段是否只读
required	设置或返回 number 字段在表单中是否为必填字段
step	设置或返回 number 字段的 step 属性值
type	返回 number 字段的表单元素类型
value	设置或返回 number 字段的 value 属性值

标准属性和事件

Input Number 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Range 对象

Input Range 对象

Input Range 对象是 HTML5 新增的。

Input Range 对象表示使用 type="range" 属性的 HTML <input> 元素。

注意： Internet Explorer 9及更早IE版本不支持使用 type="range" 属性的 HTML <input> 元素。.

访问 Input Range 对象

你可以使用 getElementById() 函数来访问使用 type="range" 属性的 <input> 元素:

var x = document.getElementById("myRange");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Range 对象。

创建 Input Range 对象

你可以使用 document.createElement() 方法来创建使用 type="range" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "range");尝试一下

Input Range 对象属性

属性	描述
autocomplete	设置或返回滑块控件的 autocomplete 属性值
autofocus	设置或返回滑块控件在页面加载后是否自动获取焦点
defaultValue	设置或返回滑块控件默认的值
disabled	设置或返回滑块控件是否可用
form	返回使用滑块控件的表单引用
list	返回包含了滑块控件的 datalist 引用
max	设置或返回滑块控件的 max 属性值
min	设置或返回滑块控件的 min 属性值
name	设置或返回滑块控件的 name 属性值
step	设置或返回滑块控件的 step 属性值
type	返回滑块控件的表单类型
value	设置或返回滑块控件的 value 属性值

标准属性和事件

Input Range 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Password 对象

Password 对象

Password 对象代表 HTML 表单中的密码字段。

HTML 的 <input type="password"> 标签在表单上每出现一次，一个 Password 对象就会被创建。

与类型为 "text" 的元素类似，当用户改变显示值时，它会触发 onchange 事件句柄。

您可以通过遍历表单的 elements[] array 来访问密码字段，或者通过使用 document.getElementById() 。

Password 对象属性

W3C: W3C 标准。

属性	描述	W3C
defaultValue	设置或返回密码字段的默认值。	Yes
disabled	设置或返回是否应被禁用密码字段。	Yes
form	返回对包含此密码字段的表单的引用。	Yes
maxLength	设置或返回密码字段中字符的最大数目。	Yes
name	设置或返回密码字段的名称。	Yes
readOnly	设置或返回密码字段是否应当是只读的。	Yes
size	设置或返回密码字段的长度。	Yes
type	返回密码字段的表单元素类型。	Yes
value	设置或返回密码字段的 value 属性的值。	Yes

Password 对象方法

方法	描述	W3C
select()	选取密码字段中的文本。	Yes

标准属性和事件

Password 对象同样支持标准的属性和事件。

HTML DOM Radio 对象

Radio Object

Radio 对象代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。

您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。

Radio 对象属性

W3C: W3C 标准。

属性	描述	W3C
checked	设置或返回单选按钮的状态。	Yes
defaultChecked	返回单选按钮的默认状态。	Yes
disabled	设置或返回是否禁用单选按钮。	Yes
form	返回一个对包含此单选按钮的表单的引用。	Yes
name	设置或返回单选按钮的名称。	Yes
type	返回单选按钮的表单类型。	Yes
value	设置或返回单选按钮的 value 属性的值。	Yes

标准属性和事件

Radio对象同样支持标准的属性和事件。

HTML DOM Reset 对象

Reset 对象

在 HTML 表单中 <input type="reset"> 标签每出现一次，一个 Reset 对象就会被创建。

当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

重置按钮在重置表单之前触发 onclick 句柄，并且这个句柄可以通过返回 fasle 来取消。

您可以通过遍历表单的 elements[] 数组来访问某个重置按钮，或者通过使用document.getElementById()。

Reset 对象属性

W3C: W3C 标准。

属性	描述	W3C
disabled	设置或返回重置按钮是否应被禁用。	Yes
form	返回一个对包含此重置按钮的表单对象的引用。	Yes
name	设置或返回重置按钮的名称。	Yes
type	返回重置按钮的表单元素类型。	Yes
value	设置或返回重置按钮上显示的文本。	Yes

标准属性和事件

Reset 对象同样支持标准的属性和事件。

HTML DOM Input Search 对象

Input Search 对象

Input Search 对象是 HTML5 新增的。

Input Search 对象表示使用 type="search" 的 HTML <input> 元素。

访问 Input Search 对象

你可以使用 getElementById() 函数来访问使用 type="search" 属性的 <input> 元素:

var x = document.getElementById("mySearch");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Search 对象。

创建 Input Search 对象

你可以使用 document.createElement() 方法来创建使用 type="search" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "search");尝试一下

Input Search 对象属性

Property	描述
autocomplete	设置或返回 search 字段的 autocomplete 属性值
autofocus	设置或返回 search 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 search 字段默认的值
disabled	设置或返回 search 字段是否可用
form	返回使用 search 字段的表单引用
list	返回包含了 search 字段的 datalist 引用
maxLength	设置或返回 search 字段的 maxLength 属性值
name	设置或返回 search 字段的 name 属性值
pattern	设置或返回 search 字段的 pattern 属性值
placeholder	设置或返回 search 字段的 placeholder 属性值
readOnly	设置或返回 search 字段是否只读
required	设置或返回 search 字段在表单中是否为必填字段
size	设置或返回 search 字段的 size 属性值
step	设置或返回 search 字段的 step 属性值
type	返回 search 字段的表单元素类型
value	设置或返回 search 字段的 value 属性值

标准属性和事件

Input Search 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Submit 对象

Submit 对象

Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。

在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。

在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。

您可以通过遍历表单的 elements[] 数组来访问某个提交按钮，或者通过使用document.getElementById()。

Submit 对象属性

W3C: W3C 标准。

属性	描述	W3C
disabled	设置或返回提交按钮是否应被禁用。	Yes
form	返回一个对包含此提交按钮的表单的引用。	Yes
name	设置或返回提交按钮的名称。	Yes
type	返回提交按钮的表单元素类型。	Yes
value	设置或返回在提交按钮上显示的文本。	Yes

标准属性和事件

Submit 对象同样支持标准的属性和事件。

HTML DOM Input Text 对象

Input Text 对象

Input Text 对象代表 HTML 中 type="text" 的 <input> 元素。

访问 Input Text 对象

你可以通过 getElementById() 访问 type="text" 的 <input> 元素：

varx = document.getElementById("myText");尝试一下

提示： 同样，你可以通过查找表单 elements 集合来访问 Input Text 对象。

创建 Input Text 对象

你可以通过 document.createElement() 方法来创建 type="text" 的 <input> 元素:

var x = document.createElement("INPUT");
x.setAttribute("type", "text");尝试一下

Input Text 对象属性

= HTML5 新增属性。

属性	描述
autocomplete	设置或返回文本域的 autocomplete 属性值
autofocus	在页面加载后设置或返回文本域是否自动获取焦点
defaultValue	设置或返回文本域的默认值
disabled	设置或返回文本域是否禁用
form	返回一个对包含文本域的表单对象的引用
list	返回一个对包含文本域的选项列表对象的引用
maxLength	设置或返回文本域中的最大字符数
name	设置或返回文本域的名称
pattern	设置或返回文本域的 pattern 属性值
placeholder	设置或返回文本域的 placeholder 属性值
readOnly	设置或返回文本域是否应是只读的
required	设置或返回 whether the text field must be filled out before submitting a form
size	设置或返回文本域的 size 属性值
type	返回文本域的表单元素类型
value	设置或返回文本域的 value 属性值

Input Text 对象方法

方法	描述
blur()	从文本域中移除焦点
focus()	让文本域获取焦点
select()	选取文本域的内容

标准属性和事件

Input Text 对象同样支持标准属性和事件。

HTML DOM Input Time 对象

Input Time 对象

Input Time 对象是 HTML5 新增的。

Input Time 对象表示使用 type="time" 属性的 HTML <input> 元素。

注意： Internet Explorer 或 Firefox浏览器不支持使用type="time" 属性的 HTML <input> 元素。

访问 Input Time 对象

你可以使用 getElementById() 函数来访问使用 type="time" 属性的 <input> 元素:

var x = document.getElementById("myTime");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Time 对象。

创建 Input Time 对象

你可以使用 document.createElement() 方法来创建使用 type="time" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "time");尝试一下

Input Time 对象属性

属性	描述
autocomplete	设置或返回 time 字段的 autocomplete 属性值
autofocus	设置或返回 time 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 time 字段默认的值
disabled	设置或返回 time 字段是否可用
form	返回使用 time 字段的表单引用
list	返回包含了 time 字段的 datalist 引用
max	设置或返回 time 字段的 max 属性值
min	设置或返回 time 字段的 min 属性值
name	设置或返回 time 字段的 name 属性值
readOnly	设置或返回 time 字段是否只读
required	设置或返回 time 字段在表单中是否为必填字段
step	设置或返回 time 字段的 step 属性值
type	返回 time 字段的表单元素类型
value	设置或返回 time 字段的 value 属性值

标准属性和事件

Input Time 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input URL 对象

Input URL 对象

Input URL 对象是 HTML5 新增的。

Input URL 对象表示使用 type="url" 属性的 HTML <input> 元素。

注意：Internet Explorer 9 (及更早IE版本), 或 Safari 浏览器不支持使用 type="url" 属性的 HTML <input> 元素。

访问 Input URL 对象

你可以使用 getElementById() 函数来访问使用 type="url" 属性的 <input> 元素:

var x = document.getElementById("myUrl");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input URL 对象。

创建 Input URL 对象

你可以使用 document.createElement() 方法来创建使用 type="url" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "url");尝试一下

Input URL 对象属性

属性	描述
autocomplete	设置或返回 URL 字段的 autocomplete 属性值
autofocus	设置或返回 URL 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 URL 字段默认的值
disabled	设置或返回 URL 字段是否可用
form	返回使用 URL 字段的表单引用
list	返回包含了 URL 字段的 datalist 引用
maxLength	设置或返回 URL 字段的 maxlength 属性值
multiple	设置或者返回 URL 字段是否允许用户输入一个或多个 url 地址。
name	设置或返回 URL 字段的 name 属性值
pattern	设置或返回 URL 字段 pattern 属性的值
placeholder	设置或返回 URL 字段 placeholder 属性的值
readOnly	设置或返回 URL 字段是否只读
required	设置或返回 URL 字段在表单中是否为必填字段
size	设置或返回 URL 段 size 属性的值
step	设置或返回 URL 段 step 属性的值
type	返回 URL 字段的表单元素类型
value	设置或返回 URL 字段的 value 属性值

标准属性和事件

Input URL 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Input Week 对象

Input Week 对象

Input Week 对象是 HTML5 新增的。

Input Week 对象表示使用 type="week" 属性的 HTML <input> 元素。

注意：Internet Explorer 或 Firefox 浏览器不支持使用 type="week" 属性的 HTML <input> 元素。

访问 Input Week 对象

你可以使用 getElementById() 函数来访问使用 type="week" 属性的 <input> 元素:

var x = document.getElementById("myWeek");尝试一下

提示： 你同样可以通过表单的元素集合来访问 Input Week 对象。

创建 Input Week 对象

你可以使用 document.createElement() 方法来创建使用 type="week" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "week");尝试一下

Input Week 对象属性

属性	描述
autocomplete	设置或返回 week 字段的 autocomplete 属性值
autofocus	设置或返回 week 字段在页面加载后是否自动获取焦点
defaultValue	设置或返回 week 字段默认的值
disabled	设置或返回 week 字段是否可用
form	返回使用 week 字段的表单引用
list	返回包含了 week 字段的 datalist 引用
max	设置或返回 week 字段的 max 属性值
min	设置或返回 week 字段的 min 属性值
name	设置或返回 week 字段的 name 属性值
readOnly	设置或返回 week 字段是否只读
required	设置或返回 week 字段在表单中是否为必填字段
step	设置或返回 week 字段 step 属性的值
type	返回 week 字段的表单元素类型
value	设置或返回 week 字段的 value 属性值

标准属性和事件

Input Week 对象同样支持标准属性和事件。

HTML 教程: HTML 表单

HTML 参考手册: HTML <input> 标签

HTML 参考手册: HTML <input> type 属性

HTML DOM Keygen 对象

Keygen 对象

Keygen 对象代表着HTML form表单的 keygen 字段。

该对象提供了一个安全的方式来验证用户。

当提交表单时，私钥存储在本地，公钥发送到服务器。

在 HTML 文档中的每个 <keygen> 标签都能创建一个 Keygen 对象。

你可以通过form 表单的elements[]数组来搜索 keygen 字段，或者使用 document.getElementById()。

Keygen 对象属性

= HTML5新增属性。

属性	描述
autofocus	设置或者返回页面加载时是否自动获得焦点。
challenge	设置或者返回keygen字段的challenge属性值。
disabled	设置或者返回是否用 keytag 字段。
form	返回包含该 keygen 字段的表单。
keytype	设置或者返回keygen字段的keytype属性值。
name	设置或者返回keygen字段name属性的值。
type	返回keygen字段是哪种表单元素类型。

标准属性和事件

keygen 对象同样支持标准属性和事件。

HTML DOM Link 对象

Link 对象

Link 对象代表某个 HTML 的 <link> 元素。<link> 元素可定义两个链接文档之间的关系。

Link 对象属性

W3C： W3C 标准。

属性	描述	W3C
charset	设置或返回目标 URL 的字符编码。	Yes
href	设置或返回被链接资源的 URL。	Yes
hreflang	设置或返回目标 URL 的基准语言。	Yes
media	设置或返回文档显示的设备类型。	Yes
rel	设置或返回当前文档与目标 URL之间的关系。	Yes
rev	设置或返回目标 URL 与当前文档之间的关系。	Yes
type	设置或返回目标 URL 的 MIME 类型。	Yes

标准属性和事件

Link 对象同样支持标准的属性和事件。

HTML DOM Label 对象

Label 对象

Label 对象表示一个 HTML <keygen> 元素。

访问 Label 对象

您可以使用 getElementById() 来访问 <label> 元素：

varx = document.getElementById("myLabel");尝试一下

创建 Label 对象

您可以使用 document.createElement() 方法来创建 <label> 元素：

var x = document.createElement("LABEL");尝试一下

Label 对象属性

属性	描述
control	返回标注的控件。
form	返回一个包含 label 的表单的引用。
htmlFor	设置或返回 lable 的 for 属性的值。

标准属性和事件

Label 对象同样支持标准属性和事件。

HTML 教程：HTML 表单

HTML 参考手册：HTML <label> 标签

HTML DOM Legend 对象

Legend 对象

Legend 对象表示一个 HTML <legend> 元素。

访问 Legend 对象

您可以使用 getElementById() 来访问 <legend> 元素：

varx = document.getElementById("myLegend");尝试一下

创建 Legend 对象

您可以使用 document.createElement() 方法来创建 <legend> 元素：

var x = document.createElement("LEGEND");尝试一下

Legend 对象属性

属性	描述
form	返回一个包含 legend 的表单的引用。

标准属性和事件

Legend 对象同样支持标准属性和事件。

HTML 参考手册：HTML <fieldset> 标签

HTML 参考手册：HTML <legend> 标签

HTML DOM Li 对象

Li 对象

Li 对象表示一个 HTML <li> 元素。

访问 Li 对象

您可以使用 getElementById() 来访问 <li> 元素：

varx = document.getElementById("myLi");尝试一下

创建 Li 对象

您可以使用 document.createElement() 方法来创建 <li> 元素：

var x = document.createElement("LI");尝试一下

Li 对象属性

属性	描述
value	设置或返回一个列表项的 value 属性的值。

标准属性和事件

Li 对象同样支持标准属性和事件。

HTML 参考手册：HTML <li> 标签

HTML DOM Map 对象

Map 对象

Map 对象表示 HTML <map> 元素。

访问 Map 对象

你可以使用 getElementById() 访问 <map> 元素：

var x = document.getElementById("myMap");尝试一下

创建 Map 对象

你可以通过使用 document.createElement() 方法创建 <map> 元素：

var x = document.createElement("MAP");尝试一下

Map 对象集合

集合	描述
areas	返回图象地图中所有 <area> 元素的集合
images	返回所有与图象地图相关 <img> 和 <object> 元素的集合

Map 对象熟悉

属性	描述
name	设置或返回图像地图的 name 属性值

标准属性和事件

Map 对象同样支持标准的属性和事件。

HTML DOM Menu 对象

Menu 对象

Menu 对象表示 HTML <menu> 元素。

注意： <menu> 元素目前没有主流浏览器支持。

访问 Menu 对象

你可以使用 getElementById() 访问 <menu> 元素：

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

创建 Menu 对象

你可以使用 document.createElement() 方法创建 <menu> 元素：

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

Menu 对象属性

属性	描述
label	设置或者返回菜单的 label 属性
type	设置或者返回菜单的 type 属性值

标准属性和事件

Menu对象同样支持标准的属性和事件

HTML 参考手册: HTML <menu> 标签

HTML DOM MenuItem 对象

MenuItem 对象

MenuItem 对象是HTML5新增的。

MenuItem 对象表示 HTML <menuitem> 元素。

注意：目前只有Firefox浏览器支持 <menuitem>元素。

访问 MenuItem 对象

你可以使用 getElementById() 来访问<menuitem>元素：

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

创建 MenuItem 对象

你可以使用 document.createElement() 方法创建 <menuitem> 元素：

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

MenuItem 对象属性

Property	描述
checked	设置或返回菜单项是否应进行检查
command	设置或返回菜单项 command 属性的值
default	设置或返回菜单项是否应该是默认的命令
disabled	设置或返回菜单项是否禁用
icon	设置或返回代表菜单项的图片
label	设置或返回菜单项的 label 属性值
radiogroup	设置或返回菜单项的 radiogroup 属性值
type	设置或返回菜单项的 type 属性值

标准属性和事件

MenuItem 对象同样支持标准的属性和事件

HTML 参考手册: HTML<标签>

HTML DOM Meta 对象

Meta 对象

Meta 对象代表 HTML 的一个 <meta> 元素。

Meta 对象属性

W3C: W3C 标准。

属性	描述	W3C
content	设置或返回 <meta> 元素的 content 属性的值。	Yes
httpEquiv	把 content 属性连接到一个 HTTP 头部。	Yes
name	把 content 属性连接到某个名称。	Yes
scheme	设置或返回用于解释 content 属性的值的格式。	Yes

标准属性和事件

Meta 对象同样支持标准的属性和事件。

HTML DOM Meter 对象

Meter 对象

Meter 对象是 HTML5 中新增的。

Meter 对象表示一个 HTML <meter> 元素。

访问 Meter 对象

您可以使用 getElementById() 来访问 <meter> 元素：

varx = document.getElementById("myMeter");尝试一下

创建 Meter 对象

您可以使用 document.createElement() 方法来创建 <meter> 元素：

var x = document.createElement("METER");尝试一下

Meter 对象属性

属性	描述
high	设置或返回度量中 high 属性的值。
labels	返回度量的 <label> 元素的列表。
low	设置或返回度量中 low 属性的值。
max	设置或返回度量中 max 属性的值。
min	设置或返回度量中 min 属性的值。
optimum	设置或返回度量中 optimum 属性的值。
value	设置或返回度量中 value 属性的值。

标准属性和事件

Meter 对象同样支持标准属性和事件。

HTML 参考手册：HTML <meter> 标签

HTML DOM Ol 对象

Ol 对象

Ol 对象表示一个 HTML <ol> 元素。

访问 Ol 对象

您可以使用 getElementById() 来访问 <ol> 元素：

varx = document.getElementById("myOl");尝试一下

创建 Ol 对象

您可以使用 document.createElement() 方法来创建 <ol> 元素：

var x = document.createElement("OL");尝试一下

Ol 对象属性

属性	描述
compact	HTML5 中不支持。使用 style.lineHeight 替代。设置或返回列表是否呈现比正常情况更小巧的效果。
reversed	设置或返回列表是否为降序。
start	设置或返回有序列表的 start 属性的值。
type	设置或返回有序列表的 type 属性的值。

标准属性和事件

Ol 对象同样支持标准属性和事件。

HTML 参考手册：HTML <ol> 标签

HTML DOM OptionGroup 对象

OptionGroup 对象

OptionGroup 对象表示一个 HTML <optgroup> 元素。

访问 OptionGroup 对象

您可以使用 getElementById() 来访问 <optgroup> 元素：

varx = document.getElementById("myOptgroup");尝试一下

创建 OptionGroup 对象

您可以使用 document.createElement() 方法来创建 <optgroup> 元素：

var x = document.createElement("OPTGROUP");尝试一下

OptionGroup 对象属性

属性	描述
disabled	设置或返回是否禁用选项组。
label	设置或返回选项组的 label 属性的值。

标准属性和事件

OptionGroup 对象同样支持标准属性和事件。

HTML 参考手册：HTML <optgroup> 标签

HTML DOM Option 对象

Option 对象

Option 对象代表 HTML 表单中下拉列表中的一个选项。

在 HTML 表单中 <option> 标签每出现一次，一个 Option 对象就会被创建。

您可通过表单的 elements[] 数组访问一个 Option 对象，或者通过使用 document.getElementById()。

Option 对象属性

W3C： W3C 标准。

属性	描述	W3C
defaultSelected	返回 selected 属性的默认值。	Yes
disabled	设置或返回选项是否应被禁用。	Yes
form	Returns a reference to the form that contains the option	Yes
index	返回对包含该元素的 <form> 元素的引用。	Yes
selected	设置或返回 selected 属性的值。	Yes
text	设置或返回某个选项的纯文本值。	Yes
value	设置或返回被送往服务器的值。	Yes

标准属性和事件

Option 对象同样支持标准的属性和事件。

HTML DOM Parameter 对象

Parameter 对象

Parameter 对象表示 HTML <param> 元素。

<param> 元素用于定义 <object> 元素中嵌入插件的参数。

访问 Parameter 对象

你可以使用 getElementById() 访问 <param> 元素：

var x = document.getElementById("myParam");尝试一下

创建 Parameter 对象

你可以使用 document.createElement() 方法创建 <param> 元素:

var x = document.createElement("PARAM");尝试一下

Parameter 对象属性

属性	描述
name	设置或返回参数的 name 属性值
value	设置或返回参数的 value 属性值

标准属性和事件

Parameter 对象同样支持标准属性和事件。

HTML 教程: HTML 插件

HTML 参考手册: HTML <param> 标签

HTML 参考手册: HTML <object> 标签

HTML DOM Progress 对象

Progress 对象

Progress 对象是 HTML5 新增的。

Progress 对象表示一个 HTML <progress> 元素。

<progress> 元素表示任务的进度。

访问 Progress 对象

你可以通过使用 getElementById() 来访问 <progress> 元素：

var x = document.getElementById("myProgress");尝试一下

创建 Progress 对象

你可以使用 document.createElement() 方法来创建 <progress> 元素：

var x = document.createElement("PROGRESS");尝试一下

Progress 对象属性

属性	描述
labels	返回进度条的标签的列表 (如果有的话)
max	设置或者返回进度条 max 属性的值
position	返回当前进度条的位置
value	设置或者返回进度条 value 属性的值

标准属性和事件

Progress 对象同样支持标准属性和事件。

HTML 参考手册: HTML <progress> 标签

HTML DOM Script 对象

Script 对象

Script 对象表示一个 HTML <script> 元素。

访问 Script 对象

您可以使用 getElementById() 来访问 <script> 元素：

var x = document.getElementById("myScript");尝试一下

创建 Script 对象

您可以使用 document.createElement() 方法来创建 <script> 元素：

var x = document.createElement("SCRIPT");尝试一下

Script 对象属性

= HTML5 中新增的属性。

属性	描述
async	设置或返回是否异步执行脚本（一旦脚本可用）。
charset	设置或返回脚本的 charset 属性的值。
defer	设置或返回是否在页面完成解析时执行脚本。
src	设置或返回脚本的 src 属性的值。
text	设置或返回脚本的所有子文本节点的内容。
type	设置或返回脚本的 type 属性的值。

标准属性和事件

Script 对象同样支持标准属性和事件。

HTML 参考手册：HTML <script> 标签

HTML DOM Select 对象

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。

在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。

您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

Select 对象集合

W3C： W3C 标准。

集合	描述	W3C
options	返回包含下拉列表中的所有选项的一个数组。	Yes

Select 对象属性

属性	描述	W3C
disabled	设置或返回是否应禁用下拉列表。	Yes
form	返回对包含下拉列表的表单的引用。	Yes
length	返回下拉列表中的选项数目。	Yes
multiple	设置或返回是否选择多个项目。	Yes
name	设置或返回下拉列表的名称。	Yes
selectedIndex	设置或返回下拉列表中被选项目的索引号。	Yes
size	设置或返回下拉列表中的可见行数。	Yes
type	返回下拉列表的表单类型。	Yes

Select 对象方法

方法	描述	W3C
add()	向下拉列表添加一个选项。	Yes
remove()	从下拉列表中删除一个选项。	Yes

标准属性和事件

Select 对象同样支持标准的属性和事件。

HTML DOM Source 对象

Source 对象

Source 对象是 HTML5 中新增的。

Source 对象表示一个 HTML <source> 元素。

访问 Source 对象

您可以使用 getElementById() 来访问 <source> 元素：

varx = document.getElementById("mySource");尝试一下

创建 Source 对象

您可以使用 document.createElement() 方法来创建 <source> 元素：

var x = document.createElement("SOURCE");尝试一下

Source 对象属性

属性	描述
media	设置或返回 <source> 元素中 media 属性的值。
src	设置或返回 <source> 元素中 src 属性的值。
type	设置或返回 <source> 元素中 type 属性的值。

标准属性和事件

Source 对象同样支持标准属性和事件。

HTML 教程：HTML5 Video（视频）

HTML 教程：HTML5 Audio（音频）

HTML 参考手册：HTML <source> 标签

HTML DOM Style 对象

Style 对象

Style 对象表示一个个别的样式声明。

访问 Style 对象

Style 对象可以从文档的头部区域访问，或者从指定的 HTML 元素访问。

从文档的头部区域访问 style 对象：

var x = document.getElementsByTagName("STYLE");尝试一下

访问一个指定元素的 style 对象：

var x = document.getElementById("myH1").style;尝试一下

创建 Style 对象

您可以使用 document.createElement() 方法来创建 <style> 元素：

var x = document.createElement("STYLE");尝试一下

您也可以设置一个已有元素的 style 属性：

document.getElementById("myH1").style.color = "red";尝试一下

Style 对象属性

"CSS" 列表示该属性是在哪一个 CSS 版本中定义的（CSS1、CSS2 或 CSS3）。

属性	描述	CSS
alignContent	设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（水平）。	3
alignItems	设置或返回灵活容器内的各项的对齐方式。	3
alignSelf	设置或返回灵活容器内被选中项目的对齐方式。	3
animation	是下面除了 animationPlayState 属性之外的其他属性的速记属性。	3
animationDelay	设置或返回动画何时开始。	3
animationDirection	设置或返回是否循环交替反向播放动画。	3
animationDuration	设置或返回动画完成需花费的秒数或毫秒数。	3
animationFillMode	设置或返回当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animationIterationCount	设置或返回动画的播放次数。	3
animationName	设置或返回关键帧 @keyframes 动画的名称。	3
animationTimingFunction	设置或返回动画的速度曲线。	3
animationPlayState	设置或返回动画是运行的还是暂停的。	3
background	设置或返回在一个声明中的所有背景属性。	1
backgroundAttachment	设置或返回背景图像是否固定或随页面滚动。	1
backgroundColor	设置或返回元素的背景色。	1
backgroundImage	设置或返回元素的背景图像。	1
backgroundPosition	设置或返回的背景图像的起始位置。	1
backgroundRepeat	设置或返回如何重复背景图像。	1
backgroundClip	设置或返回背景的绘制区域。	3
backgroundOrigin	设置或返回背景图像的定位区域。	3
backgroundSize	设置或返回背景图像的大小。	3
backfaceVisibility	设置或返回当一个元素背对屏幕时是否可见。	3
border	设置或返回在一个声明中的 borderWidth、borderStyle 和 borderColor。	1
borderBottom	设置或返回在一个声明中的所有 borderBottom* 属性。	1
borderBottomColor	设置或返回下边框的颜色。	1
borderBottomLeftRadius	设置或返回左下角边框的形状。	3
borderBottomRightRadius	设置或返回右下角边框的形状。	3
borderBottomStyle	设置或返回下边框的样式。	1
borderBottomWidth	设置或返回下边框的宽度。	1
borderCollapse	设置或返回表格的边框是否被折叠为一个单一的边框。	2
borderColor	设置或返回元素边框的颜色（最多可以有四个值）。	1
borderImage	一个用于设置或返回所有的 borderImage* 属性的速记属性。	3
borderImageOutset	设置或返回边框图像区域超出边界框的量。	3
borderImageRepeat	设置或返回图像边框是重复拼接图块还是延伸图块。	3
borderImageSlice	设置或返回图像边框的向内偏移。	3
borderImageSource	设置或返回要作为边框使用的图像。	3
borderImageWidth	设置或返回图像边框的宽度。	3
borderLeft	设置或返回在一个声明中的所有 borderLeft* 属性。	1
borderLeftColor	设置或返回左边框的颜色。	1
borderLeftStyle	设置或返回左边框的样式。	1
borderLeftWidth	设置或返回左边框的宽度。	1
borderRadius	一个用于设置或返回四个 border*Radius 属性的速记属性。	3
borderRight	设置或返回在一个声明中的所有 borderRight* 属性。	1
borderRightColor	设置或返回右边框的颜色。	1
borderRightStyle	设置或返回右边框的样式。	1
borderRightWidth	设置或返回右边框的宽度。	1
borderSpacing	设置或返回表格中单元格之间的距离。	2
borderStyle	设置或返回元素边框的样式（最多可以有四个值）。	1
borderTop	设置或返回在一个声明中的所有 borderTop* 属性。	1
borderTopColor	设置或返回上边框的颜色。	1
borderTopLeftRadius	设置或返回左上角边框的形状。	3
borderTopRightRadius	设置或返回右上角边框的形状。	3
borderTopStyle	设置或返回上边框的样式。	1
borderTopWidth	设置或返回上边框的宽度。	1
borderWidth	设置或返回元素边框的宽度（最多可以有四个值）。	1
bottom	设置或返回定位元素的底部位置。	2
boxDecorationBreak	设置或返回分页处元素的背景和边框行为，或者换行处内联元素的背景和边框行为。	3
boxShadow	设置或返回元素的下拉阴影。	3
boxSizing	允许您以特定的方式定义匹配某个区域的特定元素。	3
captionSide	设置或返回表格标题的位置。	2
clear	设置或返回元素相对浮动对象的位置。	1
clip	设置或返回定位元素的可见部分。	2
color	设置或返回文本的颜色。	1
columnCount	设置或返回元素应该被划分的列数。	3
columnFill	设置或返回如何填充列。	3
columnGap	设置或返回列之间的间隔。	3
columnRule	一个用于设置或返回所有的 columnRule* 属性的速记属性。	3
columnRuleColor	设置或返回列之间的颜色规则。	3
columnRuleStyle	设置或返回列之间的样式规则。	3
columnRuleWidth	设置或返回列之间的宽度规则。	3
columns	一个用于设置或返回 columnWidth 和 columnCount 的速记属性。	3
columnSpan	设置或返回一个元素应横跨多少列。	3
columnWidth	设置或返回列的宽度。	3
content	与 :before 和 :after 伪元素一起使用，来插入生成的内容。	2
counterIncrement	增加一个或多个计数器。	2
counterReset	创建或重置一个或多个计数器。	2
cursor	设置或返回鼠标指针显示的光标类型。	2
direction	设置或返回文本的方向。	2
display	设置或返回元素的显示类型。	1
emptyCells	设置或返回是否显示表格中的空单元格的边框和背景。	2
filter	设置或返回图片滤镜(可视效果，如：高斯模糊与饱和度)	3
flex	相对于同一容器其他灵活的项目，设置或返回项目的长度。	3
flexBasis	设置或灵活项目的初始长度。	3
flexDirection	设置或返回灵活项目的方向。	3
flexFlow	是 flexDirection 和 flexWrap 属性的速记属性。	3
flexGrow	设置或返回项目将相对于同一容器内其他灵活的项目进行扩展的量。	3
flexShrink	设置或返回项目将相对于同一容器内其他灵活的项目进行收缩的量。	3
flexWrap	设置或返回灵活项目是否拆行或拆列。	3
cssFloat	设置或返回元素的水平对齐方式。	1
font	设置或返回一个声明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。	1
fontFamily	设置或返回文本的字体。	1
fontSize	设置或返回文本的字体尺寸。	1
fontStyle	设置或返回字体样式是否是 normal（正常的）、italic（斜体）或 oblique（倾斜的）。	1
fontVariant	设置或返回是否以小型大写字母显示字体。	1
fontWeight	设置或返回字体的粗细。	1
fontSizeAdjust	当使用备用字体时，确保文本的可读性。	3
fontStretch	从字体库中选择一种正常的、浓缩的或扩大的字体。	3
hangingPunctuation	规定一个标点符号是否可以放置在线框外。	3
height	设置或返回元素的高度。	1
hyphens	设置如何拆分单词来提高段落布局。	3
icon	向作者提供为一个带有等价于图标的元素定义样式的功能。	3
imageOrientation	规定一个用户代理应用到图像上的顺时针方向的旋转。	3
justifyContent	设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（垂直）。	3
left	设置或返回定位元素的左部位置。	2
letterSpacing	设置或返回文本中字符之间的空间。	1
lineHeight	设置或返回在文本中行之间的距离。	1
listStyle	设置或返回一个声明中的 listStyleImage、listStylePosition 和 listStyleType。	1
listStyleImage	设置或返回作为列表项标记的图像。	1
listStylePosition	设置或返回列表项标记的位置。	1
listStyleType	设置或返回列表项标记的类型。	1
margin	设置或返回元素的外边距（最多可以有四个值）。	1
marginBottom	设置或返回元素的的下外边距。	1
marginLeft	设置或返回元素的左外边距。	1
marginRight	设置或返回元素的右外边距。	1
marginTop	设置或返回元素的上外边距。	1
maxHeight	设置或返回元素的最大高度。	2
maxWidth	设置或返回元素的最大宽度。	2
minHeight	设置或返回元素的最小高度。	2
minWidth	设置或返回元素的最小宽度。	2
navDown	设置或返回当使用向下箭头导航键时要导航到哪里。	3
navIndex	设置或返回元素的显示顺序。	3
navLeft	设置或返回当使用向左箭头导航键时要导航到哪里。	3
navRight	设置或返回当使用向右箭头导航键时要导航到哪里。	3
navUp	设置或返回当使用向上箭头导航键时要导航到哪里。	3
opacity	设置或返回元素的不透明度。	3
order	设置或返回一个灵活的项目相对于同一容器内其他灵活项目的顺序。	3
orphans	设置或返回当元素内有分页时，必须在页面底部预留的最小行数。	2
outline	设置或返回在一个声明中的所有 outline 属性。	2
outlineColor	设置或返回一个元素周围的轮廓颜色。	2
outlineOffset	对轮廓进行偏移，并在边框边缘进行绘制。	3
outlineStyle	设置或返回一个元素周围的轮廓样式。	2
outlineWidth	设置或返回一个元素周围的轮廓宽度。	2
overflow	设置或返回如何处理呈现在元素框外面的内容。	2
overflowX	规定如果内容溢出元素的内容区域，是否对内容的左/右边缘进行裁剪。	3
overflowY	规定如果内容溢出元素的内容区域，是否对内容的上/下边缘进行裁剪。	3
padding	设置或返回元素的内边距（最多可以有四个值）。	1
paddingBottom	设置或返回元素的下内边距。	1
paddingLeft	设置或返回元素的左内边距。	1
paddingRight	设置或返回元素的右内边距。	1
paddingTop	设置或返回元素的上内边距。	1
pageBreakAfter	设置或返回元素后的分页行为。	2
pageBreakBefore	设置或返回元素前的分页行为。	2
pageBreakInside	设置或返回元素内的分页行为。	2
perspective	设置或返回 3D 元素被查看的视角。	3
perspectiveOrigin	设置或返回 3D 元素的底部位置。	3
position	设置或返回用于元素定位方法的类型（static、relative、absolute 或 fixed）。	2
quotes	设置或返回嵌入引用的引号类型。	2
resize	设置或返回是否可由用户调整元素的尺寸大小。	3
right	设置或返回定位元素的右部位置。	2
tableLayout	设置或返回表格单元格、行、列的布局方式。	2
tabSize	设置或返回制表符（tab）字符的长度。	3
textAlign	设置或返回文本的水平对齐方式。	1
textAlignLast	设置或返回当 text-align 属性设置为 "justify" 时，如何对齐一个强制换行符前的最后一行。	3
textDecoration	设置或返回文本的修饰。	1
textDecorationColor	设置或返回文本修饰的颜色。	3
textDecorationLine	设置或返回文本修饰要使用的线条类型。	3
textDecorationStyle	设置或返回文本修饰中的线条样式。	3
textIndent	设置或返回文本第一行的缩进。	1
textJustify	设置或返回当 text-align 属性设置为 "justify" 时，要使用的对齐方法。	3
textOverflow	设置或返回当文本溢出包含它的元素，应该发生什么。	3
textShadow	设置或返回文本的阴影效果。	3
textTransform	设置或返回文本的大小写。	1
top	设置或返回定位元素的顶部位置。	2
transform	向元素应用 2D 或 3D 转换。	3
transformOrigin	设置或返回被转换元素的位置。	3
transformStyle	设置或返回被嵌套的元素如何呈现在 3D 空间中。	3
transition	一个用于设置或返回四个过渡属性的速记属性。	3
transitionProperty	应用过渡效果的 CSS 属性的名称。	3
transitionDuration	设置或返回完成过渡效果需要花费的时间（以秒或毫秒计）。	3
transitionTimingFunction	设置或返回过渡效果的速度曲线。	3
transitionDelay	设置或返回过渡效果何时开始。	3
unicodeBidi	设置或返回文本是否被重写，以便在同一文档中支持多种语言。	2
verticalAlign	设置或返回元素中内容的垂直对齐方式。	1
visibility	设置或返回元素是否应该是可见的。	2
whiteSpace	设置或返回如何处理文本中的制表符、换行符和空格符。	1
width	设置或返回元素的宽度。	1
wordBreak	设置或返回非 CJK 语言的换行规则。	3
wordSpacing	设置或返回文本中单词之间的空间。	1
wordWrap	允许长单词或 URL 地址换行到下一行。	3
widows	设置或返回一个元素必须在页面顶部的可见行的最小数量。	2
zIndex	设置或返回定位元素的堆叠顺序。	2

HTML DOM Table 对象

Table 对象

Table 对象代表一个 HTML 表格。

在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。

Table 对象集合

W3C： W3C 标准。

集合	描述	W3C
cells	返回包含表格中所有单元格的一个数组。	No
rows	返回包含表格中所有行的一个数组。	Yes
tBodies	返回包含表格中所有 tbody 的一个数组。	Yes

Table 对象属性

属性	描述	W3C
align	已废弃. 表在文档中的水平对齐方式。	D
background	已废弃设置或者返回表格的背景	D
bgColor	已废弃表格的背景颜色。	D
border	已废弃设置或返回表格边框的宽度。 instead	D
caption	返回表格标题。	Yes
cellPadding	设置或返回单元格内容和单元格边框之间的空白量。	Yes
cellSpacing	设置或返回在表格中的单元格之间的空白量。	Yes
frame	设置或返回表格的外部边框。	Yes
height	已废弃设置或者返回表格高度 instead	D
rules	设置或返回表格的内部边框（行线）。	Yes
summary	设置或返回对表格的描述（概述）。	Yes
tFoot	返回表格的 TFoot 对象。如果不存在该元素，则为 null。	Yes
tHead	返回表格的 THead 对象。如果不存在该元素，则为 null。	Yes
width	已废弃设置或返回表格的宽度。	D

Table 对象方法

方法	描述	W3C
createCaption()	为表格创建一个 caption 元素。	Yes
createTFoot()	在表格中创建一个空的 tFoot 元素。	Yes
createTHead()	在表格中创建一个空的 tHead 元素。	Yes
deleteCaption()	从表格删除 caption 元素以及其内容。	Yes
deleteRow()	从表格删除一行。	Yes
deleteTFoot()	从表格删除 tFoot 元素及其内容。	Yes
deleteTHead()	从表格删除 tHead 元素及其内容。	Yes
insertRow()	在表格中插入一个新行。	Yes

标准属性和事件

Table 对象同样支持标准的属性和事件。

HTML DOM td/th 对象

td 对象

td 对象代表了 HTML 中数据单元。

在 HTML 表格中每个 <td> 标签都会创建一个 td 对象。

th 对象

th 对象代表了 HTML 标准中的表头单元。

HTML 中每个 <th> 标签都会创建一个 th 对象。

td/th 对象属性

W3C: W3C 标准。

属性	描述	W3C
abbr	设置或返回单元格中内容的缩写版本。	Yes
align	已废弃。设置或返回单元格内部数据的水平排列方式。	D
axis	设置或返回相关单元格的一个逗号分隔的列表。	Yes
background	已废弃。设置或返回表格的背景图片。	D
bgColor	已废弃。设置或返回表格的背景颜色	D
cellIndex	返回单元格在某行的单元格集合中的位置。	Yes
ch	设置或返回单元格的对齐字符。	Yes
chOff	设置或返回单元格的对齐字符的偏移量。	Yes
colSpan	单元格横跨的列数。	Yes
headers	置或返回 header-cell 的 id 值。	Yes
height	已废弃。设置或返回数据单元的高度	D
noWrap	已废弃。 nowrap 属性规定表格单元格中的内容不换行。	D
rowSpan	设置或返回单元格可横跨的行数。	Yes
vAlign	设置或返回表格单元格内数据的垂直排列方式。	Yes
width	已废弃。设置或返回单元格的宽度。	D

标准属性和事件

td/th 对象同样支持标准的属性和事件。

HTML DOM TableHeader 对象

TableHeader 对象

TableHeader 对象表示一个 HTML <th> 元素。

访问 TableHeader 对象

您可以使用 getElementById() 来访问 <th> 元素：

varx = document.getElementById("myTh");尝试一下

提示：您也可以通过搜索表单的 cells 集合来访问 TableHeader 对象。

创建 TableHeader 对象

您可以使用 document.createElement() 方法来创建 <th> 元素：

var x = document.createElement("TH");尝试一下

TableHeader 对象属性

属性	描述
abbr	设置或返回 abbr 属性的值。
align	HTML5 中不支持。使用 style.textAlign 替代。设置或返回数据单元格中内容的水平对齐方式。
axis	HTML5 中不支持。设置或返回一个用逗号分隔的相关数据单元格的列表。
background	HTML5 中不支持。使用 style.background 替代。设置或返回数据单元格的背景图像。
bgColor	HTML5 中不支持。使用 style.backgroundColor 替代。设置或返回表格的背景颜色。
cellIndex	返回单元格在表格行的单元格集合中的位置。
ch	HTML5 中不支持。设置或返回数据单元格根据的对齐字符。
chOff	HTML5 中不支持。设置或返回 ch 属性的水平偏移。
colSpan	设置或返回 colspan 属性的值。
headers	设置或返回 headers 属性的值。
height	HTML5 中不支持。使用 style.height 替代。设置或返回数据单元格的高度。
noWrap	HTML5 中不支持。使用 style.whiteSpace 替代。设置或返回单元格中的内容是否折行。
rowSpan	设置或返回 rowspan 属性的值。
vAlign	HTML5 中不支持。使用 style.verticalAlign 替代。设置或返回单元格中内容的垂直对齐方式。
width	HTML5 中不支持。使用 style.width 替代。设置或返回数据单元格的宽度。

标准属性和事件

TableHeader 对象同样支持标准属性和事件。

HTML 教程：HTML 表格

HTML 参考手册：HTML <th> 标签

HTML DOM tr 对象

tr 对象

tr 对象代表了 HTML 表格的行。

HTML文档中出现一个 <tr> 标签，就会创建一个tr对象。

tr 对象集合

W3C： W3C 标签。

集合	描述	W3C
cells	返回表格行中所有<td>和<th>元素的集合	Yes

tr 对象属性

属性	描述	W3C
align	已废弃。设置或返回在行中数据的水平排列。	D
bgColor	已废弃。设置或返回表格行的的颜色。	D
ch	设置或返回在行中单元格的对齐字符。	Yes
chOff	设置或返回在行中单元格的对齐字符的偏移量。	Yes
height	已废弃。设置或返回表格行的高度。使用 style.height 取代	D
rowIndex	返回该行在表中的位置。	Yes
sectionRowIndex	R返回在 tBody 、tHead 或 tFoot 中，行的位置。	Yes
vAlign	设置或返回在行中的数据的垂直排列方式。	Yes

tr 对象方法

方法	描述	W3C
deleteCell()	删除行中的指定的单元格。	Yes
insertCell()	在一行中的指定位置插入一个空的	元素。	Yes

标准属性和事件

tr 对象同样支持标准的属性和事件。

HTML DOM Textarea 对象

Textarea 对象

Textarea 对象代表 HTML 表单中的一个文本域 (text-area)。

HTML 表单的每一个 <textarea> 标签，都能创建一个Textarea 对象。

您可以通过索引相应表单的元素数组来访问某个 Textarea 对象，或者使用 getElementById()。

Textarea 对象属性。

W3C： W3C 标准。

属性	描述	W3C
cols	设置或返回 textarea 的宽度。	Yes
defaultValue	设置或返回文本框中的初始内容。	Yes
disabled	设置或返回 textarea 是否应当被禁用。	Yes
form	返回对包含该 textarea 的表单对象的引用。	Yes
name	设置或返回 textarea 的名称。	Yes
readOnly	设置或返回 textarea 是否应当是只读的。	Yes
rows	设置或返回 textarea 的高度。	Yes
type	返回该文本框的表单类型。	Yes
value	设置或返回在 textarea 中的文本。	Yes

Textarea 对象方法

方法	描述	W3C
select()	选择 textarea 中的文本。	Yes

标准属性和事件

Textarea 对象同样支持标准的属性和事件。

HTML DOM title 属性

定义和用法

title 属性设置或返回元素的标题。

语法

HTMLElementObject.title=title

浏览器支持

所有主要浏览器都支持 title 属性

实例

实例 1

返回 body 元素的 title属性：

输出结果:

Body title: mytitle
An alternate way: mytitle

实例 2

返回图像中的区域地图标题：

HTML DOM Time 对象

Time 对象

Time 对象是 HTML5 中新增的。

Time 对象表示一个 HTML <time> 元素。

访问 Time 对象

您可以使用 getElementById() 来访问 <time> 元素：

var x = document.getElementById("myTime");尝试一下

创建 Time 对象

您可以使用 document.createElement() 方法来创建 <time> 元素：

var x = document.createElement("TIME");尝试一下

Time 对象属性

属性	描述
dateTime	设置或返回 <time> 元素中 datetime 属性的值。

标准属性和事件

Time 对象同样支持标准属性和事件。

HTML 参考手册：HTML <time> 标签

HTML DOM Track 对象

Track 对象

Track 对象是 HTML5 新增的。

Track 对象表示 HTML <track> 元素。

访问 Track 对象

你可以通过使用 getElementById() 来访问 <track> 元素：

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

创建 Track 对象

你可以使用 document.createElement() 方法来创建 <track> 元素：

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

Track 对象属性

属性	描述
default	设置或返回轨道的默认状态
kind	设置或返回轨道的 kind 属性值
label	设置或返回轨道的 label 属性值
readyState	返回当前轨道资源的状态
src	设置或返回轨道的src属性值
srclang	设置或返回轨道的 srclang 属性值
track	返回 TextTrack 对象，表示 track 元素的轨道文本数据

标准属性和事件

Track 对象同样支持标准属性和事件。

HTML 参考手册: HTML <track> 标签

HTML DOM Video 对象

Video 对象

Video 对象是 HTML5 中新增的。

Video 对象表示 HTML <video> 元素。

访问 Video 对象t

您可以通过使用 getElementById() 来访问 <video> 元素：

var x = document.getElementById("myVideo");尝试一下

创建 Video 对象

您可以通过使用 document.createElement() 方法来创建 <video> 元素：

var x = document.createElement("VIDEO");尝试一下

Video 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放视频。
buffered	返回表示视频已缓冲部分的 TimeRanges 对象。
controller	返回表示视频当前媒体控制器的 MediaController 对象。
controls	设置或返回视频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回视频的 CORS 设置。
currentSrc	返回当前视频的 URL。
currentTime	设置或返回视频中的当前播放位置（以秒计）。
defaultMuted	设置或返回视频默认是否静音。
defaultPlaybackRate	设置或返回视频的默认播放速度。
duration	返回视频的长度（以秒计）。
ended	返回视频的播放是否已结束。
error	返回表示视频错误状态的 MediaError 对象。
height	设置或返回视频的 height 属性的值。
loop	设置或返回视频是否应在结束时再次播放。
mediaGroup	设置或返回视频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回视频的当前网络状态。
paused	设置或返回视频是否暂停。
playbackRate	设置或返回视频播放的速度。
played	返回表示视频已播放部分的 TimeRanges 对象。
poster	设置或返回视频的 poster 属性的值。
preload	设置或返回视频的 preload 属性的值。
readyState	返回视频当前的就绪状态。
seekable	返回表示视频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在视频中进行查找。
src	设置或返回视频的 src 属性的值。
startDate	返回表示当前时间偏移的 Date 对象。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象。
volume	设置或返回视频的音量。
width	设置或返回视频的 width 属性的值。

Video 对象方法

Method	描述
addTextTrack()	向视频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的视频类型。
load()	重新加载视频元素。
play()	开始播放视频。
pause()	暂停当前播放的视频。

标准属性和事件

Video 对象同样支持标准的属性和事件。

HTML 教程: HTML5 视频

HTML 参考手册: HTML <video> 标签

setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])

interval制定对function或methodName调用两次之间的时间，单位是毫秒。后面的arg1等是可选的参数，用于制定传递给function或是methodName的参数。

下面的例子每隔1秒调用一次匿名函数。

setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。

function show1(){    trace("每隔1秒显示一次");}function show2(str){    trace(str);}setInterval(show1,1000);setInterval(show2,2000,"每隔2秒我就会显示一次");

上面已经将函数的setInterval方法介绍了。下面我们将介绍对象的setInterval方法。

首先，写一个setInterval在动作中调用对象的方法的例子，该例子不需要传递参数。

myobj=new Object();//创建一个新的对象myobj.interval=function){    trace("每隔1秒显示一次");}//创建对象的方法。setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。

接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。

myobj=new Object();myobj.interval-function(str){    trace(str);}setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");

setInterval(show,1000);function show(){    time=new Date();    hour=time.getHours();       minu=time.getMinutes();       sec=time.get.Seconds();    datetime=hour+":"+minu+":"+sec;}//这里的datetime是一个动态文本框的变量名字。

用clearinterval命令让setinterval停下来

function show(){ trace("每隔一秒我就会显示一次"); } var sh; sh=setInterval(show,1000); clearInterval(sh);

js实例代码1：

function auto(){ alert("到時間了") } var monitorInterval = null;  function setAuto(time,isFrist){ var intervalTime=time; if(isFrist!="1"){ if(intervalTime!="off"){ monitorInterval= setInterval("auto()", intervalTime*1000); }else{ if(monitorInterval){    clearInterval(monitorInterval); monitorInterval = null; } } } }

html实例代码2：

<table> <tr> <td nowrap="nowrap" bgcolor="#E8E8E8">自動更新</td> <td align="left" bgcolor="#E8E8E8"><select onchange="setAuto(this.value,'0')"> <option value="10">10sec</option> <option value="20">20sec</option> <option value="30">30sec</option> <option value="60">1min</option> <option value="300">5min</option> <option value="600">10min</option> <option value="1800">30min</option> <option value="3600">60min</option> <option value="off">Stay</option> </select></td> </tr> </table>

使用setinterval同步加载Ext多个Store

var bChartArr =[false, false, false, false];  //加载图表轴  Ext.getStore("ChartAxes").load(  {      params:{ queryId:queryId },      callback:function(){          bChartArr[0] = true;      }  });  //加载图表序列  Ext.getStore("ChartSeries").load(  {      params:{ queryId:queryId },      callback:function(){          bChartArr[1] = true;      }    });  //加载图表样式  Ext.getStore("ChartStyle").load(  {      params:{ queryId:queryId },      callback:function(){          bChartArr[2] = true;      }  });  // 按钮  Ext.getStore("Buttons").load(  {      params:{query_id:queryId},      scope:this,      callback:function(){          bChartArr[3] = true;      }  });  var me = this;  // 等待所有的Storoe加载完成后执行  var timer = setInterval(function(){      if(bChartArr[0] && bChartArr[1] && bChartArr[2] && bChartArr[3]){          clearInterval(timer); // 清除等待          // 解析图表样式、轴、序列动态生成图表          me.createChartPanel();      }  },100);

这样就有效的解决了Ext多个异步加载的store的同步问题。

说明：这里使用了数组来判断数据是否加载完成。其实另外两个方法应该也是可以的：

在JS脚本中，多个setinterval之间出现干扰怎么办？

不能同时执行是肯定的，必然有一个先后次序，但是可以几乎是同时运行。如果你确定是互扰的问题，可以只定义一个setinterval，例如：

var timeIntervalNumber = 1;var timeInterval = setInterval('doSomething()', 1000);function doSomething() {if (timeIntervalNumber % 2) {...}if (timeIntervalNumber % 5) {...}timeIntervalNumber ++;if (timeIntervalNumber >= 2 * 5) {timeIntervalNumber = 1;}}

或者如下面代码所示，页面也不会报错或者卡壳。

var firstInterval;var secondInterval;function firstAlert(){	if(firstInterval) clearInterval(firstInterval);<span style="white-space:pre">	</span>//处理所有<span style="white-space:pre">	</span>.........<span style="white-space:pre">	</span>firstInterval = setInterval('firstAlert()', 1000*2);}function secondAlert(){	if(secondInterval) clearInterval(secondInterval);<span style="white-space:pre">	</span>//处理所有<span style="white-space:pre">	</span>.......secondInterval = setInterval('secondAlert()', 1000*3);	}

onmouseleave 事件

实例

在鼠标指针移出指针时执行 JavaScript:

在以下更多实例中点 "尝试一下" 查看更多演示。

定义和用法

onmouseleave 事件在鼠标移除元素时触发。

提示： 该事件通常与onmouseenter 事件一起使用，该事件在鼠标移动到元素上时触发。

提示: onmouseleave 事件类似于onmouseout 事件。唯一的区别是 onmouseleave 事件不支持冒泡。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onmouseleave	30.0	5.5	Yes	6.1	11.5

语法

HTML 中:

<element onmouseleave="myScript">尝试一下

JavaScript 中:

object.onmouseleave=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("mouseleave", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	MouseEvent
支持的 HTML 标签:	所有 HTML 元素，除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>

实例

该实例演示了 onmousemove, onmouseleave 和 onmouseout 事件的区别:

onpaste 事件

实例

在 <input> 元素上粘贴文本时执行 JavaScript :

本文底部可以查看更多实例。

定义和用法

onpaste 事件在用户向元素中粘贴文本时触发。

提示： onpaste 事件通常用于 type="text" 的 <input> 元素。

提示： 有三种方式可以在元素中粘贴内容：

按下 CTRL + V
从浏览器的编辑菜单中选择 "Paste（粘贴）"
右击鼠标按钮在上下文菜单中选择 "Paste（粘贴）" 命令。

浏览器支持

事件
onpaste	Yes	Yes	Yes	Yes	Yes

语法

HTML 中：

<element onpaste="myScript">尝试一下

JavaScript 中：

object.onpaste=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("paste", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	ClipboardEvent
支持的 HTML 标签:	所有 HTML 元素

实例

当向 <p> 元素上粘贴文本内容时执行 JavaScript (注意 contenteditable 设置为 "true"):

<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容。</p>

onpageshow 事件

实例

在用户浏览网页时触发 JavaScript:

本文底部包含了更多实例。

定义和用法

onpageshow 事件在用户浏览网页时触发。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onpageshow	Yes	11.0	Yes	5.0	Yes

语法

HTML 中：

<element onpageshow="myScript">尝试一下

JavaScript 中：

object.onpageshow=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("pageshow", myScript);尝试一下

注意： Internet Explorer8 及更早 IE 版本的浏览器不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	PageTransitionEvent
支持的 HTML 标签:	<body>

实例

查看页面是否从浏览器缓存中读取：

function myFunction(event) {
alert("该页面是否从浏览器缓存中读取? " + event.persisted);
}

onpagehide 事件

实例

当用户从网页离开时执行 JavaScript :

定义和用法

onpagehide 事件在用户离开网页时触发。

离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。.

onpagehide 事件有时可以替代onunload 事件，但 onunload 事件触发后无法缓存页面。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onpagehide	Yes	11.0	Yes	5.0	Yes

语法

HTML 中：

<element onpagehide="myScript">

JavaScript 中：

object.onpagehide=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("pagehide", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	PageTransitionEvent
支持的 HTML 标签:	<body>

ondurationchange 事件

实例

当视频的时长发生变化时执行 JavaScript:

本文底部包含了更多实例。

定义和用法

ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。

注意： 当视频/音频（audio/video）已经加载后，视频/音频（audio/video）的时长从 "NaN" 修改为正在的时长。

在视频/音频（audio/video）加载过程中，事件的触发顺序如下:

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
ondurationchange	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element ondurationchange="myScript">尝试一下

JavaScript 中：

object.ondurationchange=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("durationchange", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

实例

当音频开始加载时执行 JavaScript :

onsuspend 事件

实例

在浏览器读取媒体数据中止时执行 JavaScript :

定义和用法

onsuspend 事件在浏览器读取媒体数据中止时触发。

提示： 影响媒体加载的事件有：

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onsuspend	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element onsuspend="myScript">

JavaScript 中：

object.onsuspend=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("suspend", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

onprogress 事件

实例

视频正在下载时执行 JavaScript :

本文底部包含了更多实例。

定义和用法

onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。

在下载视频/音频（audio/video）过程中，事件触发的顺序如下：

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onprogress	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element onprogress="myScript">尝试一下

JavaScript 中：

object.onprogress=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("progress", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

实例

音频正在下载时执行 JavaScript :

animationstart 事件

实例

在 CSS 动画开始播放时为 <div> 元素添加监听事件:

定义和用法

animationstart 事件在 CSS 动画开始播放时触发。

更多关于 CSS 动画的内容，请查看我们的CSS3 动画章节。

CSS 动画播放时，会发生以下三个事件：

animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

"webkit" 或 "moz" 后面指定的数字为支持该事件的第一个版本号前缀。

事件
animationstart	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

注意： Chrome, Safari 和 Opera 浏览器使用webkitAnimationEnd 前缀。

语法

object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	Yes
是否可以取消:	No
事件类型:	AnimationEvent

onseeked 事件

实例

在用户重新定位视频的播放位置后执行 JavaScript :

本文底部包含了更多实例。

定义和用法

onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。

提示： 与 onseeked 事件相反的是onseeking事件。

提示： 使用 currentTime 可以设置或返回视频/音频（audio/video）播放的当前位置。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onseeked	Yes	9.0	Yes	Yes	Yes

语法

HTML 中：

<element onseeked="myScript">尝试一下

JavaScript 中：

object.onseeked=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("seeked", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<audio>, <video>

实例

以下实例演示了 onseeking 事件和onseeked 事件的区别:

实例

在用户重新定位视频播放位置后，可以使用 Video 对象的 currentTime 属性来显示当前的播放位置：

实例

在音频重新定位播放位置后执行 JavaScript :

which 事件属性

实例

获取按下的键盘按键Unicode值：

var x = event.which;

x 输出结果为:

119 // 119 是字符"w"

本文底部包含了更多实例。

定义和使用

which 属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或onkeyup 事件的键的代码。

两种代码类型的区别是:

字符代码 - 表示 ASCII 字符的数字
键盘代码 - 表示键盘上真实键的数字

var x = event.which || event.keyCode; // 使用 which 或 keyCode, 这样可支持不同浏览器

提示： 所有 Unicode 字符列表可查看我们的完整 Unicode 参考手册。

提示： 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。

注意： 该属性是只读的。

注意： which和 keyCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用key 属性来替代该方法。

提示： 如果你想查看是否按下了 "ALT", "CTRL","META" 或 "SHIFT" 键，可使用altKey, ctrlKey, metaKey 或shiftKey 属性。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
which	Yes	9.0	Yes	Yes	Yes

语法

event.which

技术细节

返回值：	数字，表示 Unicode 字符代码或 Unicode 键代码
DOM 版本:	DOM Level 2 Events

实例

使用 onkeypress 和 onkeydown 来演示字符代码与键盘代码的区别：

当在键盘上按下 "a" 键 (不使用大写锁定), 输出结果如下:

Unicode 字符代码: 97
Unicode 键盘代码: 65

实例

如果按下 Esc 键弹出提示信息：

实例

将 Unicode 值转换为字符 (不能用于功能键):

var x = event.which || event.keyCode; //获取 Unicode 值
var y = String.fromCharCode(x); // 将值转换为字符

metaKey 事件属性

定义和用法

metaKey 事件属性可返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。

语法

event.metaKey

实例

下面的例子可提示当鼠标按键被点击时 "meta" 键是否被按住：

onoffline 事件

实例

在浏览器离在线工作时执行 JavaScript :

定义和用法

onoffline 事件在浏览器离线工作时触发。

提示： onoffline 事件的相反事件是ononline 。

提示： 你同样可以使用 navigator.onLine 属性来擦可能浏览器是否是在线或离线模式。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onoffline	不支持	IE11 已废弃 8.0	3.0	不支持	不支持

语法

HTML 中：

<element onoffline="myScript">尝试一下

JavaScript 中：

object.onoffline=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("offline", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<body>

button 事件属性

定义和用法

button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

语法

event.button=0|1|2

参数	描述
0	指定鼠标左键。
1	指定鼠标中键。
2	指定鼠标右键。

注意： Internet Explorer 8 及更早IE版本有不同的参数：

参数	描述
1	指定鼠标左键。 (IE8及更早IE版本)
4	指定鼠标中键。 (IE8及更早IE版本)
2	指定鼠标右键。

提示和注释

注意： 对于惯用左手的鼠标配置，上面的参数是颠倒的。

relatedTarget 事件属性

定义和用法

relatedTarget 事件属性返回与事件的目标节点相关的节点。

对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

对于其他类型的事件来说，这个属性没有用。

语法

event.relatedTarget

实例

下面例子可返回指针刚刚离开的元素：

onshow 事件

实例

当 <menu> 元素在上下文菜单显示时执行 JavaScript:

定义和用法

onshow 事件当 <menu> 元素在上下文菜单显示时触发。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
onshow	不支持	不支持	8.0	不支持	不支持

语法

HTML 中：

<element onshow="myScript">尝试一下

JavaScript 中：

object.onshow=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("show", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<menu>

clientX 事件属性

定义和用法

clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口。

语法

event.clientX

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

screenX 事件属性

定义和用法

screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。

语法

event.screenX

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

ontoggle 事件

实例

当 <details> 元素在打开或关闭时执行 JavaScript:

定义和用法

ontoggle 事件在用户打开或关闭 <details> 元素时触发。

<details> 元素描述了额外的信息，用户可以根据需求查看或隐藏它。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
ontoggle	12.0	不支持	不支持	6.0	15.0

语法

HTML 中：

<element ontoggle="myScript">尝试一下

JavaScript 中：

object.ontoggle=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("toggle", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	No
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<details>

clientY 事件属性

定义和用法

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。

语法

event.clientY

实例

下面的例子可显示出事件发生时鼠标指针的坐标：

bubbles 事件属性

定义和用法

bubbles 事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。

事件冒泡分为三个阶段，它是这样的:

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

语法

event.bubbles

实例

下面的例子可检测发生的事件是否是一个起泡事件：

ctrlKey 事件属性

定义和用法

ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。

语法

event.ctrlKey=true|false|1|0

实例

下面的例子可提示当鼠标按键被点击时 "CTRL" 键是否被按住：

shiftKey Event 属性

定义和用法

shiftKey 事件属性可返回一个布尔值，指示当事件发生时，"SHIFT" 键是否被按下并保持住。

语法

event.shiftKey=true|false|1|0

实例

下面的例子可提示当鼠标按键被点击时 "SHIFT" 键是否被按住：

cancelable 事件属性

定义和用法

cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。

语法

event.cancelable

实例

下面的例子讲检测发生的事件是否是一个 cancelable 事件：

location 事件属性

实例

获取键所处的位置：

var x = event.location;

x 输出结果为：

定义和使用

location 属性返回按键在键盘或设置上的位置。

数字可由 4 个常数表示：

0. DOM_KEY_LOCATION_STANDARD:

表示不是最左边或者最右边的按键，也不是数字键盘上的数字（该值几乎包含了所有的按键，如 "A", "U", "SPACE" 或 "5")

1. DOM_KEY_LOCATION_LEFT:

左侧按键 (如果左侧的 "CTRL" 键或左侧的"ALT" 键)

2. DOM_KEY_LOCATION_RIGHT:

右侧按键 (如果右侧的 "CTRL" 键或左侧的"ALT" 键)

3. DOM_KEY_LOCATION_NUMPAD:

数字按键（在标准键盘的右侧）

注意： location 属性可用于onkeydown 和 onkeyup 事件，但不能用于onkeypress事件。

注意： 该属性是只读的。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
location	Yes	9.0	15.0	不支持	Yes

语法

event.location

技术细节

返回值:

数字，代表键盘或设备上按键的位置。

4 个数字可用常数来表示:

0. DOM_KEY_LOCATION_STANDARD
1. DOM_KEY_LOCATION_LEFT
2. DOM_KEY_LOCATION_RIGHT
3. DOM_KEY_LOCATION_NUMPAD

DOM 版本:

DOM Level 3 Events

currentTarget 事件属性

定义和用法

currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。

在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。

语法

event.currentTarget

实例

下面的例子可获得哪个元素的监听器触发了事件：

Body aLink 属性

定义和用法

aLink 属性可设置或者返回 body 元素中 alink 属性的值。

alink 属性指定了文档链接点击时的颜色 (链接被点击时)。

语法

设置 aLink 属性:

bodyObject.aLink="color"

返回 aLink 属性:

bodyObject.aLink

值	描述
color	指定了链接颜色。查看完整的 CSS 颜色值

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 aLink 属性

实例

返回页面链接，链接点击时，链接点击后的颜色值：

key 事件属性

实例

按下按键时获取键盘按钮：

var x = event.key;

x 输出结果为：

Enter

本文底部包含了更多实例。

定义和使用

key 事件在按下按键时返回按键的标识符。

按键标识符是表示键盘按钮的字符串，该属性的返回值可以是：

单个字母 (如 "a", "W", "4", "+" 或 "$")
多个字母 (如 "F1", "Enter", "HOME" 或 "CAPS LOCK")

提示： 如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
key	不支持	9.0	23.0	不支持	不支持

语法

event.key

技术细节

返回值：	字符串，表示按键按钮。可能值：单个字母 (如 "a", "W", "4", "+" 或 "$") 多个字母 (如 "F1", "Enter", "HOME" 或 "CAPS LOCK") 注意： Chrome，Safari 和 Opera浏览器返回 undefined
DOM 版本:	DOM Level 3 Events

实例

在用户按下 "A" 键时弹出提示信息:

var x = event.key;

// 按下 "a" 或 "A" 键 (使用 caps lock 或 shift)，弹出提示信息

if (x == "a" || x == "A") {
alert ("你按下了 'A' 键!");
}

timeStamp 事件属性

定义和用法

timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。

epoch 是一个事件参考点。在这里，它是客户机启动的时间。

并非所有系统都提供该信息，因此，timeStamp 属性并非对所有系统/事件都是可用的。

语法

event.timeStamp

实例

下面的例子可获得系统启动开始的事件戳：

Body bgColor 属性

定义和用法

bgColor 属性可设置或者返回 body 元素的 bgcolor 属性值。x

bgcolor 属性指定了文档的背景颜色。

语法

设置 bgColor 属性:

bodyObject.bgColor="color"

返回 bgColor 属性:

bodyObject.bgColor

值	描述
color	指定了背景颜色。查看完整的 CSS 颜色值

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 bgColor 属性

实例

返回body元素的bgcolor属性值：

<html>
<body id="w3s" bgcolor="#E6E6FA">

<script>
document.write("The background color is: ")
document.write(document.getElementById("w3s").bgColor);
</script>

</body>
</html>

Body link 属性

定义和用法

link 属性可设置或者返回 body 元素的 link属性值。

link 属性指定了文档中链接未被点击访问的颜色。

语法

设置 link 属性:

bodyObject.link="color"

返回 link 属性:

bodyObject.link

值	描述
color	指定链接颜色。查看完整的 CSS 颜色值

浏览器支持

所有主要浏览器都支持 link 属性

实例

返回文档中未被点击链接，点击链接，点击访问后的链接颜色:

Body text 属性

定义和用法

text 属性可设置或者返回 body 元素的 text 属性值。

text 属性描述了文档的文本颜色。

语法

设置 text 属性:

bodyObject.text="color"

返回 text 属性:

bodyObject.text

值	描述
color	指定了文本颜色。查看完整的 CSS 颜色值

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 text 属性。

实例

返回 body 元素的 text 属性值：

<html>
<body id="w3s" text="#0000FF">

<script>
document.write("The text color is: ")
document.write(document.getElementById("w3s").text);
</script>

</body>
</html>

Body vLink 属性

定义和用法

vLink 属性可设置或者返回 body 元素中vlink属性值。

vlink 属性描述了点击过的链接文本颜色。

语法

设置 vLink 属性:

bodyObject.vLink="color"

返回 vLink 属性:

bodyObject.vLink

值	描述
color	指定链接颜色。查看完整的 CSS 颜色值

浏览器支持

所有主要浏览器都支持 vLink 属性

实例

返回页面链接点击及点击后文本的颜色值:

Fieldset disabled 属性

实例

禁用 fieldset：

document.getElementById("myFieldset").disabled=true;

输出结果：

Personalia: 用户名：
Email：
出生日期：

定义和用法

disabled 属性设置或返回是否禁用一组相关的表单元素（一个 fieldset）。

如果设置了该属性，则禁用 fieldset 中的表单属性。

禁用的元素不可用，也不可点击。默认情况下，禁用的元素通常在浏览器中呈现为灰色。

该属性反映了 HTML disabled 属性。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

除了 Internet Explorer 和 Safari，其他主流浏览器都支持 disabled 属性。

语法

返回 disabled 属性：

fieldsetObject.disabled

设置 disabled 属性：

fieldsetObject.disabled=true|false

属性值

值	描述
true\|false	指定是否禁用一组相关的表单元素（一个 fieldset）。 true - 禁用 fieldset。 false - 默认。不禁用 fieldset。

技术细节

返回值：	布尔值，如果禁用 fieldset 则返回 true，否则返回 false。

实例

检测一个 fieldset 是否被禁用：

var x = document.getElementById("myFieldset").disabled;

x 输出结果为：

true

实例

禁用和取消禁用 fieldset：

function disableField()
{
document.getElementById("myFieldset").disabled=true;
}
function undisableFieldset()
{
document.getElementById("myFieldset").disabled=false;
}

HTML 参考手册：HTML <fieldset> disabled 属性

Fieldset form 属性

实例

返回包含 <fieldset> 元素的表单的 id：

var x = document.getElementById("myFieldset").form.id;

x 输出结果为：

myForm

定义和用法

form 属性返回一个包含 fieldset 的表单的引用。

如果成功，该属性返回一个表单对象。

注意：该属性是只读的。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 form 属性。

语法

fieldsetObject.form

技术细节

返回值：	一个包含 fieldset 的表单的引用。如果 fieldset 不在表单内，则返回 null。

Fieldset name 属性

实例

返回 fieldset 的 name 属性的值：

var x = document.getElementById("myFieldset").name;

x 输出结果为：

personalia

定义和用法

name 属性设置或返回 fieldset 的 name 属性的值。

name 属性用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。

注意：只有带有 name 属性的表单元素在提交表单时才传递它们的值。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

除了 Internet Explorer 和 Safari，其他主流浏览器都支持 name 属性。

注意：Opera 12 及其之前的版本不支持 name 属性。

语法

返回 name 属性：

fieldsetObject.name

设置 name 属性：

fieldsetObject.name=name

属性值

值	描述
name	指定 fieldset 的名称。

技术细节

返回值：	字符串，表示 fieldset 的名称。

实例

改变 fieldset 的 name 属性的值：

document.getElementById("myFieldset").name="newName";

HTML 参考手册：HTML <fieldset> name 属性

del cite 属性

del 对象参考手册 del 对象

实例

返回解释文本被删除的URL文档地址：

var x = document.getElementById("myDel").cite;

x 输出结果为:

http://www.example.com/example/why_deleted.htm

定义和使用

cite 属性用于设置或者返回删除文本的cite属性值。

cite 属性指向另外一个文档的 URL，此文档可解释文本被删除的原因。。

注意: cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 cite 属性。

语法

返回 cite 属性:

delObject.cite

设置 cite 属性:

delObject.cite=URL

属性值

Value	描述
URL	定义了解释文本为什么被删除的URL文档地址。 Possible values: 绝对 URL - 指向另一个网站（比如 cite="http://www.example.com"）相对 URL - 指向网站内的一个页面（比如 cite="example.html"）

技术描述

返回值:	字符串, 代表着源文档的URL地址

实例

修改 cite 属性值:

document.getElementById("myDel").cite="http://www.example.com/whywedeletedsometext.htm";

Dialog open 属性

实例

打开对话窗口:

document.getElementById("myDialog").open = true;

定义和用法

open 属性用于设置或者返回对话窗口是否打开。

该属性反映了 <dialog> open 属性。

如果指定了该属性，及说明对话窗口是可用的，用户可以与它进行交互。

注意： <dialog> 元素是 HTML5 新增的。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 open 属性。

语法

返回 open 属性：

dialogObject.open

设置 open 属性：

dialogObject.open=true|false

属性值

值	描述
true\|false	指定对话窗口是否打开 true - 对话窗口是打开的 false - 默认。对话窗口是关闭。

技术细节

返回值：	布尔值，如果对话窗口是打开的返回TRUE，否则返回 FALSE。

实例

查看对话窗口是否打开：

var x = document.getElementById("myDialog").open;

x输出结果为：

true

HTML 参考手册: HTML <dialog> open 属性

Frame/IFrame contentDocument 属性

定义和用法

contentDocument 属性以 HTML 对象返回框架容纳的文档。

可以通过所有标准的 DOM 方法来处理被返回的对象。

注意：由于安全原因，文档的内容只能通过同一个域名下的另外一个文档访问。

语法

frameObject.contentDocument

或者

iframeObject.contentDocument

浏览器支持

所有主要浏览器都支持 contentDocument 属性

注意：如果指定了 !DOCTYPE， Internet Explorer 8 及更高版本支持 contentDocument属性，其他IE版本请使用 contentWindow 属性。

实例

通过浏览器实例展示了如何在修改iframe中文档的背景颜色：

Dialog close() 方法

实例

显示和关闭对话窗口:

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

functionshowDialog()
{
x.show();
}

function closeDialog()
{
x.close();
}

定义和用法

close() 方法用于关闭对话窗口。

提示： 该方法通常与show() 方法一起使用。

浏览器支持

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 close() 方法。

语法

dialogObject.close()

Frame/IFrame frameBorder 属性

定义和用法

frameBorder 属性可设置或者返回 frame/iframe 元素的 frameborder 属性值。

frameborder 属性指定是否显示 iframe 周围的边框。

语法

frameObject.frameBorder=value

或者

iframeObject.frameBorder=value

frameBorder 属性可以是以下值：

值	描述
1	开启边框(默认)
0	关闭边框

浏览器支持

所有主要浏览器都支持 frameBorder 属性

实例

实例 1

返回 frameborder 属性的值：

实例 2

移除 frameborder:

Dialog show() 方法

实例

显示或者关闭对话窗口：

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

functionshowDialog()
{
x.show();
}

function closeDialog()
{
x.close();
}

定义和用法

show() 方法用于显示对话窗口。

提示：该方法通常与close() 方法一起使用。

浏览器支持

注意： 目前只有Chrome Canary，Safari 6 浏览器支持 show() 方法。

语法

dialogObject.show()

IFrame height 属性

定义和用法

height 属性可设置或者返回 iframe 元素中 height 属性的值。

height 属性指定了 iframe 的高度（以像素或百分比为单位）。

语法

iframeObject.height=value

height 属性可以是以下值：

值	描述
pixels	height 属性单位可以是像素 (如 "100px" 或者 "100")
%	height 属性单位可以是百分比 (如"20%")

浏览器支持

所有主要浏览器都支持 height 属性

实例

改变 iframe 的高度与宽度：

Frame/IFrame longDesc 属性

定义和用法

longDesc 属性可设置或者返回 frame/iframe 元素中 longDesc 属性的值。

longdesc 属性指定了一个框架内容描述的 URL。

注意：对不支持框架的浏览器可以使用该属性。

语法

frameObject.longDesc=URL

或者

iframeObject.longDesc=URL

浏览器支持

所有主要浏览器都支持 longDesc 属性

实例

返回 longdesc 属性的值:

document.write(document.getElementById("myframe").longDesc);

Submit form 属性

定义和用法

form 属性可返回对包含该确认按钮的表单的引用。

若成功，该属性返回一个表单对象。

语法

submitObject.form

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 form 属性

实例

下面的例子将返回该确认按钮所属的表单的 id：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
var x=document.getElementById("submit1").form.id;
alert(x);
}
</script>
</head>
<body>

<form id="form1">
Email: <input type="text" id="email">
<input type="submit" id="submit1">
</form>
<button type="button" onclick="displayResult()">显示所属表单的ID</button>

</body>
</html>

Frame/IFrame marginHeight 属性

定义和用法

marginHeight 属性可设置或返回 frame/iframe 元素中 marginHeight 元素的值。

marginheight 属性框架的顶部和底部页空白（以像素为单位）。

语法

frameObject.marginHeight=pixels

或者

iframeObject.marginHeight=pixels

浏览器支持

所有主要浏览器都支持 marginHeight 属性

实例

返回 marginheight 属性的值:

document.write(document.getElementById("myframe").marginHeight);

Input Number disabled 属性

实例

禁用 number 字段:

document.getElementById("myNumber").disabled = true;

结果输出为:

定义和用法

disabled 属性用于设置或者返回 number 字段是否被禁用。

使用 disabled 属性的元素是不可用和不可点击的。禁用的元素在浏览器上通常显示为灰色。

该属性反映了 HTML disabled 属性。

浏览器支持

所有主流浏览器都支持 disabled 属性

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

返回 disabled 属性：

numberObject.disabled

设置 disabled 属性：

numberObject.disabled=true|false

属性值

值	描述
true\|false	描述 number 字段是否可用。 number 字段不可用 false -默认。 number 字段可用

技术细节

返回值：	布尔值，如果 number 字段不可用返回true，否则返回false

实例

查看 number 字段是否可用：

var x = document.getElementById("myNumber").disabled;

x输出结果为：

true

实例

禁用或启用 number 字段：

function disableBtn() {
document.getElementById("myNumber").disabled = true;
}
function undisableBtn() {
document.getElementById("myNumber").disabled = false;
}

Submit name 属性

定义和用法

name 属性可设置或者返回提交按钮的 name 属性值。

name 属性用于表单提交后向服务器传送数据，或者在Javascript引用表单数据。

注意： 在表单提交后只有表单元素的 name 属性才会传递数据值。

语法

设置 name 属性:

submitObject.name="name"

返回 name 属性:

submitObject.name

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 name 属性

实例

下面的例子可显示出该确认按钮的名称：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
var x=document.getElementById("submit1").name;
alert(x);
}
</script>
</head>
<body>

<form>
Email: <input type="text" id="email">
<input type="submit" name="submit1" id="submit1">
</form>
<button type="button" onclick="displayResult()">显示提交按钮的名称</button>

</body>
</html>

Frame/IFrame marginWidth 属性

定义和用法

marginWidth 属性可设置或者返回 frame/iframe 元素中 marginWidth 属性的值。

marginwidth 属性指定了框架的左边缘和右边缘的页空白（以像素为单位）。

语法

frameObject.marginWidth=pixels

或者

iframeObject.marginWidth=pixels

浏览器支持

所有主要浏览器都支持 marginWidth 属性

实例

返回 marginwidth 属性的值:

document.write(document.getElementById("myframe").marginWidth);

Input Number form 属性

实例

返回<input type="number"> 元素所属的表单id:

var x = document.getElementById("myNumber").form.id;

x输出结果为：

myForm

定义和用法

form 属性返回包含 number 字段的表单引用。

成功时该属性返回 form 对象。

注意： 该属性为只读属性。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 form 属性

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

numberObject.form

技术细节

返回值：	包含 number 字段表单元素的引用。如果 number 字段没有在表单中，返回 null。

Submit type 属性

定义和用法

type 属性可返回确认按钮的表单元素类型。

对于确认按钮，该属性总是 "submit"。

语法

submitObject.type

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 type 属性

实例

下面的例子可返回确认按钮的表单元素类型：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
var x=document.getElementById("submit1").type;
alert(x);
}
</script>
</head>
<body>

<form>
Email: <input type="text" id="email">
<input type="submit" id="submit1">
</form>
<button type="button" onclick="displayResult()">显示 input 类型</button>

</body>
</html>

Frame/IFrame name 属性

定义和用法

name 属性可设置或者返回 frame/iframe 元素的 name 属性值。

语法

frameObject.name=name

或者

iframeObject.name=name

浏览器支持

所有主要浏览器都支持 name 属性

实例

返回 name 属性的值：

document.write(document.getElementById("myframe").name);

Password defaultValue 属性

定义和用法

defaultValue 属性可设置或返回密码域的默认值。

注意： 该默认值是在 HTML "value" 属性中规定的默认值。

语法

设置 defaultValue 属性:

passwordObject.defaultValue="value"

返回 defaultValue 属性:

passwordObject.defaultValue

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 defaultValue 属性

实例

下面的例子可获得密码域的默认值：

Input Number placeholder 属性

实例

修改 number 字段的提示信息文本:

document.getElementById("myNumber").placeholder = "Amount";

定义和用法

placeholder 属性用于设置或者返回 number 字段的 placeholder 属性值。

placeholder 属性提供可描述输入字段预期值的提示信息。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 placeholder 属性。

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

返回 placeholder 属性：

numberObject.placeholder

设置 placeholder 属性：

numberObject.placeholder=text

属性值

值	描述
text	描述了number字段预期值提示信息 (一个单词或一个短语)

技术细节

返回值：	字符串，表示number字段预期值提示信息

实例

显示 number 字段的提示信息:

var x = document.getElementById("myNumber").placeholder;

x输出结果为：

Quantity

Frame/IFrame src 属性

定义和用法

src 属性可设置或者返回 frame/iframe 元素中 src 属性的值。

src 属性指定了被载入 frame/iframe中的文档的 URL 。

语法

frameObject.src=URL

或者

iframeObject.src=URL

浏览器支持

所有主要浏览器都支持 src 属性

实例

改变iframe中src属性：

IFrame width 属性

定义和用法

width 属性可设置或者返回 iframe 元素中 width 属性的值。

width 属性指定了iframe的宽度。

语法

iframeObject.width=value

width 属性可以是以下值：

值	描述
pixels	以像素作为单位 (如"100px" 或者 "100")
%	以百分比作为宽度 (如 "20%")

浏览器支持

所有主要浏览器都支持 width 属性

实例

改变 iframe的高度与宽度:

Input Number type 属性

实例

返回 number 字段的表单元素类型:

var x = document.getElementById("myNumber").type;

x 输出结果为:

number

定义和用法

type 属性返回 number 字段的表单类型类型。

在 input number 中，该属性通常返回 "number"。

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 type 属性

注意： Internet Explorer 9及更早IE版本不支持使用 type="number" 属性的 <input> 元素。

语法

numberObject.type

技术细节

返回值：	字符串，表示 number 字段的表单元素类型

Script src 属性

实例

获取外部引用脚本文件的字符集：

var x = document.getElementById("myScript").src

x 输出结果为:

//www.51coolma.cn/jsref/demo_script_src.js

定义和用法

charset 属性规定在外部脚本文件中使用的字符编码。

当外部脚本文件中的字符编码与 HTML 文档中的编码不同时，会用到 charset 属性。

注意： charset 属性仅适用于外部脚本（只有在使用 src 属性时）。

浏览器支持

属性
charset	Yes	Yes	Yes	Yes	Yes

语法

返回 charset 属性：

scriptObject.charset

设置 charset 属性：

scriptObject.charset=charset

属性值

值

描述

charset

规定外部脚本文件的字符编码。

一些常用的值：

"ISO-8859-1" - 拉丁字母表的标准编码
"UTF-8" - Unicode 字符编码。与 ASCII 兼容

请参阅我们的字符集参考手册，获得完整的字符集列表。

技术细节

返回值:	字符串，返回外部脚本文件使用的字符集。

Script defer 属性

实例

检查当页面完成解析时是否执行脚本：

var x = document.getElementById("myScript").defer

x 输出结果为：

true

定义和用法

defer 属性设置或返回当页面完成解析时是否执行脚本。

该属性反映 <script> 标签的 defer 属性。

注意：defer 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

浏览器支持

所有主流浏览器都支持 defer 属性。

注意：Opera 12 及其之前的版本不支持 defer 属性。

语法

返回 defer 属性：

scriptObject.defer

设置 defer 属性：

scriptObject.defer=true|false

属性值

值	描述
true\|false	规定当页面完成解析时是否执行脚本。 true - 当页面完成解析时执行脚本。 false - 当页面完成解析时不执行脚本。

技术细节

返回值：	布尔值，如果当页面完成解析时执行脚本，则返回 true，否则返回 false。

HTML 参考手册：HTML <script> defer 属性

Link hreflang 属性

定义和用法

hreflang 属性规定被链接文档中文本的语言。

语法

设置 hreflang 属性：

linkObject.hreflang="language-code"

返回 hreflang 属性：

linkObject.hreflang

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 hreflang 属性

实例

显示链接文档的语言：

Script src 属性

实例

获取外部脚本的 URL：

var x = document.getElementById("myScript").src

x 输出结果为：

//www.51coolma.cn/jsref/demo_script_src.js

定义和用法

src 属性设置或返回脚本的 src 属性的值。

src 属性规定外部脚本文件的 URL。

注意：外部脚本文件不能包含 <script> 标签。

注意：正确地引用您写入脚本的外部脚本文件。

浏览器支持

所有主流浏览器都支持 src 属性。

语法

返回 src 属性：

scriptObject.src

设置 src 属性：

scriptObject.src=URL

属性值

值

描述

URL

外部脚本文件的 URL。

可能的值：

绝对 URL - 指向另一个网站（比如 src="http://www.example.com/example.js" rel="external nofollow" ）
相对 URL - 指向网站内的一个文件（比如 src="/scripts/example.js"）

技术细节

返回值：	字符串，表示外部脚本文件的 URL。返回完整的 URL，包括协议（比如 http://）。

HTML 参考手册：HTML <script> src 属性

引用 cite 属性

引用对象参考手册引用对象

实例

返回一个引用来源:

var x = document.getElementById("myQuote").cite;

x 输出结果为:

http://www.wwf.org

定义与使用

cite 属性用于设置或者返回一个引用的cite属性值。

cite 属性描述了引用的URL源地址。

注意： cite 属性在普通的 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

Browser Support

所有主流浏览器都支持 cite 属性。

语法

返回 cite 属性：

quoteObject.cite

设置 cite 属性：

quoteObject.cite=URL

属性值

值

描述

URL

引用的来源的 URL。

可能的值：

绝对 URL - 指向另一个网站（比如 cite="http://www.example.com"）
相对 URL - 指向网站内的一个页面（比如 cite="example.html"）

技术描述

返回值:	一个字符串, 源文档的URL地址。

实例

修改引用的 cite 属性值:

document.getElementById("myQuote").cite="http://www.cnn.com/";

Select options 集合

Select 对象

定义和用法

option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

注意： 数组中的每个元素对应一个 <option> 标签 - 由 0 起始。

语法

selectObject.options

属性

属性	描述
length	返回集合的option元素数目
selectedIndex	设置或者返回select对象已选选项的索引值。(以 0 起始)

方法

方法	描述
[index]	以数字形式指定元素索引 (以 0 开始)
[add(element[,index])]	在集合中添加option元素
item(index)	以数字索引返回集合中元素
namedItem(name)	以名称为索引返回集合元素
remove(index)	从集合中移除元素

浏览器支持

所有主要浏览器都支持 options 集合

实例

循环输出下拉列表中的所有选项:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(51coolma.cn)</title>
<script>
function displayResult(){
    var x=document.getElementById("mySelect");
    var txt="All options: ";
    var i;
    for (i=0;i<x.length;i++){
        txt=txt + " " + x.options[i].text;
    }
    alert(txt);
}
</script>
</head>
<body>

<form>
你最喜欢的水果:
<select id="mySelect">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">显示所有选项的文本</button>

</body>
</html>

JavaScript RegExp S 元字符

定义和用法

S 元字符用于查找空白字符。

空白字符可以是：

空格符 (space character)
制表符 (tab character)
回车符 (carriage return character)
换行符 (new line character)
垂直换行符 (vertical tab character)
换页符 (form feed character)

语法

new RegExp("S")

或者更简单方式：

/S/

浏览器支持

所有主要浏览器都支持 S 元字符

实例

对字符串中的非空白字符进行全局搜索：

var str="Is this all there is?";
var patt1=/S/g;

下面被标记的文本显示了表达式获得匹配的位置：

Is this all there is?

JavaScript RegExp S 元字符

定义和用法

S 元字符用于查找非空白字符。

空白字符可以是：

空格符 (space character)
制表符 (tab character)
回车符 (carriage return character)
换行符 (new line character)
垂直换行符 (vertical tab character)
换页符 (form feed character)

语法

new RegExp("S")

或者更简单方式：

/S/

浏览器支持

所有主要浏览器都支持 S 元字符

实例

对字符串中的非空白字符进行全局搜索：

var str="Is this all there is?";
var patt1=/S/g;

下面被标记的文本显示了表达式获得匹配的位置：

Is this all there is?

Window setTimeout() 方法

Window 对象

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示: 1000 毫秒 = 1 秒.

语法

setTimeout(code,millisec,lang)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。
lang	可选。脚本语言可以是：JScript \| VBScript \| JavaScript

浏览器支持

所有主要浏览器都支持 setTimeout() 方法。

实例

3 秒后显示一个弹窗:

var t=setTimeout(function(){alert("Hello")},3000)

oncut 事件

实例

当 <input> 元素中的选择内容被剪切时执行 JavaScript :

在本文底部查看更多实例。

定义和用法

oncut 事件在用户剪切元素的内容时触发。

注意： 虽然使用的 HTML 元素都支持 oncut 事件，但实际上并非支持所有元素，例如 <p> 元素，除非设置了 contenteditable 为 "true" (查看下文的更多实例)。

提示： oncut 事件通常应用在 type="text" 的 <input> 元素中。

提示： 有三种方式可以剪切内容：

按下 CTRL + X
从浏览器的编辑菜单中选择 "Cut（剪切）"
右击鼠标按钮在上下文菜单中选择 "Cut（剪切）" 命令。

浏览器支持

事件
oncut	Yes	Yes	Yes	Yes	Yes

语法

HTML 中：

<element oncut="myScript">尝试一下

JavaScript 中：

object.oncut=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("cut", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	ClipboardEvent
支持的 HTML 标签:	所有 HTML 元素

实例

当剪切 <p> 元素上的文本内容时执行 JavaScript (注意contenteditable 设置为 "true"):

<p contenteditable="true" oncut="myFunction()">尝试剪切该文本</p>

引用对象属性

属性	描述
cite	设置或返回一个引用的cite属性值

标准属性和事件

引用对象支持标准属性和事件。

HTML 参考手册: HTML <q> 标签

JavaScript 参考手册: HTML DOM Blockquote 对象

del 对象参考手册 del 对象

实例

返回文本被删除的日期和时间：

var x = document.getElementById("myDel").dateTime;

x 输出结果为:

2011-11-15T22:55:03Z

定义和使用

dateTime 属性用于设置或返回删除文本的 datetime 属性值。

datetime 属性定义了被删除文本的日期和时间。

注意: dateTime 属性在普通的网页浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

浏览器支持

所有主流浏览器都支持 dateTime 属性。

语法

返回 dateTime 属性:

delObject.dateTime

设置 dateTime 属性:

delObject.dateTime=YYYY-MM-DDThh:mm:ssTZD

属性值

值

描述

YYYY-MM-DDThh:mm:ssTZD

日期或时间。下面解释了其中的成分：

YYYY - 年 (例如 2011)
MM - 月 (例如 01 表示 January)
DD - 天 (例如 08)
T - 必需的分隔符，若规定时间的话
hh - 时 (例如 22 表示 10.00pm)
mm - 分 (例如 55)
ss - 秒 (例如 03)
TZD - 时区标识符 (Z 表示祖鲁，也称为格林威治时间)

技术描述

返回值:	字符串, 代表一个删除文本的日期和时间

实例

修改datetime 属性:

document.getElementById("myDel").dateTime="2013-11-15T21:40:07Z";

Password disabled 属性

实例

实例 1

禁用密码域:

输出结果：

定义和用法

disabled 属性可设置或返回是否禁用密码域。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。

语法

设置 disabled 属性:

element.disabled=true|false

返回 disabled 属性:

element.disabled

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主要浏览器都支持 disabled 属性

HTML canvas globalCompositeOperation 属性

实例

使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像，蓝色矩形是源图像：

source-over

destination-over

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalCompositeOperation 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

默认值：	source-over
JavaScript 语法：	context.globalCompositeOperation="source-in";

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	在源图像上显示目标图像。
destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

实例

所有 globalCompositeOperation 属性值：

Canvas 对象

HTML canvas globalAlpha 属性

实例

首先，绘制一个红色的矩形，然后将透明度 (globalAlpha) 设置为 0.5，然后再绘制一个蓝色和一个绿色的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Turn transparency on
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalAlpha 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明）与 1.0（不透明）之间的数字。

默认值：	1.0
JavaScript 语法：	context.globalAlpha=number;

属性值

值	描述
number	透明值。必须介于 0.0（完全透明）与 1.0（不透明）之间。

HTML canvas getImageData() 方法

实例

下面的代码通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 getImageData() 方法。

注意： nternet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

注意：ImageData 对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

实例：

以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

尝试一下

提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

请看下面的"尝试一下"实例！

JavaScript 语法

JavaScript 语法：	context.getImageData(x,y,width,height);

参数值

参数	描述
x	开始复制的左上角位置的 x 坐标（以像素计）。
y	开始复制的左上角位置的 y 坐标（以像素计）。
width	要复制的矩形区域的宽度。
height	要复制的矩形区域的高度。

要使用的图像：

The Scream

实例

使用 getImageData() 来反转画布上的图像的每个像素的颜色：

JavaScript：

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");ctx.drawImage(img,0,0);var imgData=ctx.getImageData(0,0,c.width,c.height);// invert colorsfor (var i=0;i<imgData.data.length;i+=4)  {  imgData.data[i]=255-imgData.data[i];  imgData.data[i+1]=255-imgData.data[i+1];  imgData.data[i+2]=255-imgData.data[i+2];  imgData.data[i+3]=255;  }ctx.putImageData(imgData,0,0);

Canvas 对象

HTML canvas createImageData() 方法

实例

创建 100*100 像素的 ImageData 对象，其中每个像素都是红色的，然后把它放到画布上：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createImageData() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

因此，transparent black 表示 (0,0,0,0)。

color/alpha 信息以数组形式存在，并且由于数组包含了每个像素的四条信息，所以数组的大小是 ImageData 对象的四倍：width*height*4。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

实例：

把 ImageData 对象中的第一个像素变为红色的语法：

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

把 ImageData 对象中的第二个像素变为绿色的语法：

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

JavaScript 语法

有两个版本的 createImageData() 方法：

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

JavaScript 语法：	var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

JavaScript 语法：	var imgData=context.createImageData(imageData);

参数值

参数	描述
width	ImageData 对象的宽度，以像素计。
height	ImageData 对象的高度，以像素计。
imageData	另一个 ImageData 对象。

HTML canvas font 属性

实例

在画布上写一段 30 像素的文本，使用的字体是 "Arial"：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 font 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 CSS font 属性相同。

默认值：	10px sans-serif
JavaScript 语法：	context.font="italic small-caps bold 12px arial";

属性值

值	描述
font-style	规定字体样式。可能的值： normal italic oblique
font-variant	规定字体变体。可能的值： normal small-caps
font-weight	规定字体的粗细。可能的值： normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	规定字号和行高，以像素计。
font-family	规定字体系列。
caption	使用标题控件的字体（比如按钮、下拉列表等）。
icon	使用用于标记图标的字体。
menu	使用用于菜单中的字体（下拉列表和菜单列表）。
message-box	使用用于对话框中的字体。
small-caption	使用用于标记小型控件的字体。
status-bar	使用用于窗口状态栏中的字体。

HTML canvas quadraticCurveTo() 方法

实例

绘制一条二次贝塞尔曲线：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 quadraticCurveTo()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

开始点：

moveTo(20,20)

控制点：

quadraticCurveTo(20,100,200,20)

结束点：

quadraticCurveTo(20,100,200,20)

提示：请查看 bezierCurveTo() 方法。它有两个控制点，而不是一个。

JavaScript 语法：	context.quadraticCurveTo(cpx,cpy,x,y);

参数值

参数	描述
cpx	贝塞尔控制点的 x 坐标。
cpy	贝塞尔控制点的 y 坐标。
x	结束点的 x 坐标。
y	结束点的 y 坐标。

HTML canvas ImageData data 属性

实例

创建 100*100 像素的 ImageData 对象，其中每个像素均被设置为红色：

画布

JavaScript：

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 ImageData data 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。

实例：

把 ImageData 对象中的第一个像素变为红色的语法：

imgData=ctx.createImageData(100,100);imgData.data[0]=255;imgData.data[1]=0;imgData.data[2]=0;imgData.data[3]=255;

把 ImageData 对象中的第二个像素变为绿色的语法：

imgData=ctx.createImageData(100,100);imgData.data[4]=0;imgData.data[5]=255;imgData.data[6]=0;imgData.data[7]=255;

提示：请参阅 createImageData()、getImageData() 和putImageData() 方法，以获得更多关于 ImageData 对象的知识。

JavaScript 语法

JavaScript 语法：	imageData.data;

HTML canvas setTransform() 方法

实例

绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 setTransform()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

画布上的每个对象都拥有一个当前的变换矩阵。

setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

换句话说，setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。

注意：该变换只会影响 setTransform() 方法调用之后的绘图。

JavaScript 语法：	context.setTransform(a,b,c,d,e,f);

参数值

参数	描述
a	水平缩放绘图。
b	水平倾斜绘图。
c	垂直倾斜绘图。
d	垂直缩放绘图。
e	水平移动绘图。
f	垂直移动绘图。

HTML canvas clip() 方法

实例

从画布中剪切 200*120 像素的矩形区域。然后，绘制一个红色矩形。只有被剪切区域内的红色矩形部分是可见的：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 clip()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

clip()方法从原始画布中剪切任意形状和尺寸。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

JavaScript 语法：	context.clip();

HTML canvas transform() 方法

实例

绘制一个矩形，通过 transform() 添加一个新的变换矩阵，再次绘制矩形，添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 transform() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

画布上的每个对象都拥有一个当前的变换矩阵。

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵：

a	c	e
b	d	f
0	0	1

换句话说，transform() 允许您缩放、旋转、移动并倾斜当前的环境。

注意：该变换只会影响 transform() 方法调用之后的绘图。

注意：transform() 方法的行为相对于由 rotate()、scale()、translate() 或 transform() 完成的其他变换。例如：如果您已经将绘图设置为放到两倍，则 transform() 方法会把绘图放大两倍，您的绘图最终将放大四倍。

提示：请查看 setTransform() 方法，它不会相对于其他变换来发生行为。

JavaScript 语法：	context.transform(a,b,c,d,e,f);

参数值

参数	描述
a	水平缩放绘图。
b	水平倾斜绘图。
c	垂直倾斜绘图。
d	垂直缩放绘图。
e	水平移动绘图。
f	垂直移动绘图。

HTML canvas lineTo() 方法

实例

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineTo()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：	context.lineTo(x,y);

参数值

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y 坐标。

实例

绘制一条路径，形状是字母 L：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

HTML canvas closePath() 方法

实例

绘制一条路径，形式是字母 L，然后绘制线条以返回开始点：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 closePath()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

closePath() 方法创建从当前点到开始点的路径。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle属性来填充另一个颜色/渐变。

JavaScript 语法：	context.closePath();

实例

把红色作为填充颜色：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();

HTML canvas drawImage() 方法

要使用的图片：

The Scream

实例

向画布上面绘制图片：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 drawImage() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法

在画布上定位图像：

JavaScript 语法：	context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：

JavaScript 语法：	context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：

JavaScript 语法：	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

实例

在画布上对图像进行定位，然后规定图像的宽度和高度：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);

实例

剪切图片，并在画布上对被剪切的部分进行定位：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);

实例

要使用的视频（请按下播放键以开始演示）：

画布：

JavaScript（每 20 毫秒，代码就会绘制视频的当前帧）：

HTML canvas moveTo() 方法

实例

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 moveTo() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

moveTo() 方法把路径移动到画布中的指定点，不创建线条。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

JavaScript 语法：	context.moveTo(x,y);

参数值

参数	描述
x	路径的目标位置的 x 坐标。
y	路径的目标位置的 y 坐标。

HTML canvas measureText() 方法

实例

在画布上输出文本之前，检查字体的宽度：

JavaScript：

var c=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 measureText()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

measureText()方法返回一个对象，该对象包含以像素计的指定字体宽度。

提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。

JavaScript 语法：	context.measureText(text).width;

参数值

参数	描述
text	要测量的文本。

HTML canvas scale() 方法

实例

绘制矩形，放大到 200%，然后再次绘制矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 scale() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

scale() 方法缩放当前绘图至更大或更小。

注意：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

JavaScript 语法：	context.scale(scalewidth,scaleheight);

参数值

参数	描述
scalewidth	缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight	缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。

实例

绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，再次绘制矩形；放大到 200%，再次绘制矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

HTML canvas fillText() 方法

实例

使用 fillText()，在画布上写文本 "Hello world!" 和 "Big smile!"：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillText()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

注意：Safari 不支持 maxWidth 参数。

定义和用法

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 fillStyle属性以另一种颜色/渐变来渲染文本。

JavaScript 语法：	context.fillText(text,x,y,maxWidth);

参数值

参数	描述
text	规定在画布上输出的文本。
x	开始绘制文本的 x 坐标位置（相对于画布）。
y	开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth	可选。允许的最大文本宽度，以像素计。

HTML canvas arcTo() 方法

实例

在画布上创建介于两个切线之间的弧：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);          // Create a starting point
ctx.lineTo(100,20);          //Create a horizontal line
ctx.arcTo(150,20,150,70,50); // Create an arc
ctx.lineTo(150,120);         //Continue with vertical line
ctx.stroke();               // Draw it

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Chrome 和 Safari 支持 arcTo()方法。

注意：Opera 不支持arcTo() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

提示：请使用 stroke() 方法在画布上绘制确切的弧。

JavaScript 语法：	context.arcTo(x1,y1,x2,y2,r);

参数值

参数	描述
x1	弧的起点的 x 坐标。
y1	弧的起点的 y 坐标。
x2	弧的终点的 x 坐标。
y2	弧的终点的 y 坐标。
r	弧的半径。

HTML canvas textBaseline 属性

实例

在 y=100 处绘制一条红线，然后在 y=100 处用不同的 textBaseline 值放置每个单词：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 textBaseline 属性。

注意：textBaseline 属性在不同的浏览器上效果不同，特别是使用 "hanging" 或 "ideographic" 时。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

下面的图示演示了 textBaseline 属性支持的各种基线：

注意：fillText() 和strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值。

默认值：	alphabetic
JavaScript 语法：	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

属性值

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是 em 方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是 em 方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是 em 方框的底端。

HTML canvas arc() 方法

实例

创建一个圆形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 arc()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或fill() 方法在画布上绘制实际的弧。

中心：

arc(100,75,50,0*Math.PI,1.5*Math.PI)

起始角：

arc(100,75,50,0,1.5*Math.PI)

结束角：

arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 语法：	context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

HTML canvas clearRect() 方法

实例

在给定矩形内清空一个矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 clearRect() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

clearRect() 方法清空给定矩形内的指定像素。

JavaScript 语法：	context.clearRect(x,y,width,height);

参数值

参数	描述
x	要清除的矩形左上角的 x 坐标。
y	要清除的矩形左上角的 y 坐标。
width	要清除的矩形的宽度，以像素计。
height	要清除的矩形的高度，以像素计。

HTML canvas textAlign 属性

实例

在位置 150 创建一条红线。位置 150 是下面实例中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 textAlign 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。

通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。

提示：请使用 fillText() 或strokeText() 方法在画布上实际地绘制并定位文本。

默认值：	start
JavaScript 语法：	context.textAlign="center\|end\|left\|right\|start";

属性值

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本在指定的位置开始。
right	文本在指定的位置结束。

HTML canvas fillRect() 方法

实例

绘制 150*100 像素的已填充矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillRect() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。

提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

JavaScript 语法：	context.fillRect(x,y,width,height);

参数值

参数	描述
x	矩形左上角的 x 坐标。
y	矩形左上角的 y 坐标。
width	矩形的宽度，以像素计。
height	矩形的高度，以像素计。

HTML canvas rect() 方法

实例

绘制 150*100 像素的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 rect()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

rect() 方法创建矩形。

提示：请使用 stroke() 或fill() 方法在画布上实际地绘制矩形。

JavaScript 语法：	context.rect(x,y,width,height);

参数值

参数	描述
x	矩形左上角的 x 坐标。
y	矩形左上角的 y 坐标。
width	矩形的宽度，以像素计。
height	矩形的高度，以像素计。

实例

通过 rect() 方法来创建三个矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// 绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// 蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

HTML canvas shadowOffsetX 属性

实例

绘制一个矩形，带有向右偏移 20 像素的阴影（从矩形的 left 位置）：

JavaScript：

var c=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 shadowOffsetX 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

shadowOffsetX 属性设置或返回阴影与形状的水平距离。

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

提示：如需调整阴影与形状的垂直距离，请使用 shadowOffsetY 属性。

默认值：	0
JavaScript 语法：	context.shadowOffsetX=number;

属性值

值	描述
number	正值或负值，定义阴影与形状的水平距离。

HTML canvas miterLimit 属性

实例

以最大斜接长度 5 绘制线条：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 miterLimit 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

miterLimit 属性设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（Fig 3）：

默认值：	10
JavaScript 语法：	context.miterLimit=number;

属性值

值	描述
number	正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

HTML canvas shadowBlur 属性

实例

绘制一个带有黑色阴影的红色矩形，模糊级数是 20：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 shadowBlur 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

shadowBlur 属性设置或返回阴影的模糊级数。

默认值：	0
JavaScript 语法：	context.shadowBlur=number;

属性值

值	描述
number	阴影的模糊级数

HTML canvas lineWidth 属性

实例

用宽度为 10 像素的线条来绘制矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineWidth 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

lineWidth 属性设置或返回当前线条的宽度，以像素计。

默认值：	1
JavaScript 语法：	context.lineWidth=number;

属性值

值	描述
number	当前线条的宽度，以像素计。

HTML canvas shadowColor 属性

实例

绘制一个带有黑色阴影的红色矩形：

JavaScript：

var c=document.getElementById("myCanvas");
varctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 shadowColor 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

shadowColor 属性设置或返回用于阴影的颜色。

注意：请将 shadowColor 属性与 shadowBlur属性一起使用，来创建阴影。

提示：请通过使用 shadowOffsetX和 shadowOffsetY 属性来调节阴影效果。

默认值：	#000000
JavaScript 语法：	context.shadowColor=color;

属性值

值	描述
color	用于阴影的 CSS 颜色值。默认值是 #000000。

HTML canvas lineJoin 属性

实例

当两条线条交汇时，创建圆形边角：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineJoin 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。

注意："miter" 值受miterLimit 属性的影响。

默认值：	miter
JavaScript 语法：	context.lineJoin="bevel\|round\|miter";

属性值

值	描述
bevel	创建斜角。
round	创建圆角。
miter	默认。创建尖角。

HTML canvas strokeStyle 属性

实例

绘制一个矩形。请用红色的笔触颜色：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeStyle 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

默认值：	#000000
JavaScript 语法：	context.strokeStyle=color\|gradient\|pattern;

属性值

值	描述
color	指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）。
pattern	用于创建 pattern 笔触的 pattern 对象。

实例

绘制一个矩形。使用渐变笔触：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

实例

用一个渐变笔触来写文本 "Big smile!"：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

HTML canvas lineCap 属性

实例

绘制圆形的结束线帽：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineCap 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

lineCap 属性设置或返回线条末端线帽的样式。

注意："round" 和 "square" 值会使线条略微变长。

默认值：	butt
JavaScript 语法：	context.lineCap="butt\|round\|square";

属性值

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

HTML canvas fillStyle 属性

实例

定义用红色填充的矩形：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

默认值：	#000000
JavaScript 语法：	context.fillStyle=color\|gradient\|pattern;

属性值

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）。
pattern	用于填充绘图的 pattern 对象。

实例

定义从上到下的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

实例

定义从左到右的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

实例

定义从黑到红到白的的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

用到的图像：

Lamp

实例

使用图像来填充绘图：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

HTML canvas addColorStop() 方法

实例

定义一个从黑到白的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 addColorStop() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

addColorStop() 方法规定渐变对象中的颜色和位置。

addColorStop() 方法与createLinearGradient() 或 createRadialGradient() 一起使用。

注意：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对渐变对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。

JavaScript 语法：	gradient.addColorStop(stop,color);

参数值

参数	描述
stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color	在 stop 位置显示的 CSS 颜色值。

实例

通过多个 addColorStop() 方法来定义渐变：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

HTML canvas createRadialGradient() 方法

实例

绘制一个矩形，并用放射状/圆形渐变进行填充：

JavaScript：

var c=document.getElementById("myCanvas");
varctx=c.getContext("2d");

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createRadialGradient()方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

createRadialGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为strokeStyle或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：	context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

HTML canvas createPattern() 方法

用到的图像：

Lamp

实例

在水平和垂直方向重复图像：

JavaScript：

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createPattern() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

createPattern() 方法在指定的方向内重复指定的元素。

元素可以是图片、视频，或者其他 <canvas> 元素。

被重复的元素可用于绘制/填充矩形、圆形或线条等等。

JavaScript 语法：	context.createPattern(image,"repeat\|repeat-x\|repeat-y\|no-repeat");

参数值

参数	描述
image	规定要使用的模式的图片、画布或视频元素。
repeat	默认。该模式在水平和垂直方向重复。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

HTML canvas createLinearGradient() 方法

实例

定义从黑到白的渐变（从左向右），作为矩形的填充样式：

JavaScript：

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createLinearGradient() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：	context.createLinearGradient(x0,y0,x1,y1);

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

实例

定义一个渐变（从上到下）作为矩形的填充样式：

JavaScript：

实例

定义一个从黑到红再到白的渐变，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);