HTML基本属性解说总结_第1页
HTML基本属性解说总结_第2页
HTML基本属性解说总结_第3页
HTML基本属性解说总结_第4页
已阅读5页,还剩14页未读 继续免费阅读

付费下载

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、1 初始化新事件对象的属性语法event.initEvent(eventType,canBubble,cancelable)参数eventTypecanBubblecancelable描述字符串值。事件的类型。事件是否起泡。是否可以用 preventDefault()方法取消事件。说明该方法将初始化Document.createEvent()方法创建的合成Event对象的type属性、bubbles属性和 cancelable属性。只有在新创建的Event对象被Document 对象或 Element对象的 dispatchEvent()方法分派之前,才能调用Event.initEvent()

2、方法。2 innerHTML 属性设置或返回一个链接的内容。语法anchorObject.innerHTML=text实例下面的例子将更改一个链接的文本、URL 以及 target:<html><head><script type="text/javascript">function changeLink();document.getElementById('myAnchor').target="_blank"</script></head><body></ht

3、ml>3 innerHTML 属性可设置或返回单元格的开始标签和结束标签之间的HTML。语法tabledataObject.innerHTML=text实例下面的例子返回了表元的inner HTML :<html><head><script type="text/javascript">function alertInnerHTML()alert(document.getElementById("td1").innerHTML);</script></head><body>&l

4、t;table border="1"><tr><th>Firstname</th><th>Lastname</th></tr><tr><td id="td1">Peter</td><td id="td1">Griffin</td></tr></table><br /><input type="button" onclick=alertIn

5、nerHTML()value="Alert innerHTML" /></body></html>4 innerHTML 属性设置或返回表格行的开始和结束标签之间的HTML。语法tablerowObject.innerHTML=HTML实例下面的例子返回了表格行的inner HTML :<html><head><script type="text/javascript">function getInnerHTML()alert(document.getElementById("t

6、r1").innerHTML);</script></head><body><table border="1"><tr id="tr1"><th>Firstname</th><th>Lastname</th></tr><tr id="tr2"><td>Peter</td><td>Griffin</td></tr></table&g

7、t;<br /><input type="button" onclick="getInnerHTML()"value="Alert innerHTML of table row" /></body></html>5 images集合可返回对文档中所有Image 对象的引用。语法document.images提示和注释注释:为了与 0级 DOM 兼容,该集合不包括由<object>标记定义的图像。实例<html><body><img border=

8、"0" src="hackanm.gif" width="48" height="48"> <br /><img border="0" src="compman.gif" width="107" height="98"> <br /><br /><script type="text/javascript">document.write("Th

9、is document contains: ")</script></body></html>6 index属性可返回下拉列表中选项的索引位置。语法optionObject.index实例本例可返回下拉列表中所选的选项的索引位置:<<html><head><script type="text/javascript">function alertIndex()var x=document.getElementById("mySelect").selectedIndex;

10、 var y=document.getElementsByTagName("option"); alert(yx.text + " has the index of: " + yx.index); </script></head><body><form>Select your favorite fruit:<select id="mySelect"><option>Apple</option><option>Orange</optio

11、n><option>Pineapple</option><option>Banana</option></select><br /><br /><input type="button" onclick="alertIndex()"value="Show index of the chosen fruit"></form></body></html>7 insertCell()方法用于在 HTML 表

12、的一行的指定位置插入一个空的<td>元素。语法tablerowObject.insertCell(index)返回值一个 TableCell对象,表示新创建并被插入的<td>元素。说明该方法将创建一个新的 <td> 元素,把它插入行中指定的位置。 新单元格将被插入当前位于 index 指定位置的表元之前。 如果 index 等于行中的单元格数, 则新单元格被附加在行的末尾。请注意,该方法只能插入<td>数据表元。若需要给行添加头表元,必须用Document.createElement()方法和 Node.insertBefore()方法(或相关的

13、方法)创建并插入一个<th>元素。8 insertRow()方法用于在表格中的指定位置插入一个新行。语法tableObject.insertRow(index)返回值返回一个 TableRow,表示新插入的行。说明该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。新行将被插入 index 所在行之前。若 index 等于表中的行数, 则新行将被附加到表的末尾。如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。抛出若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代

14、码为INDEX_SIZE_ERR的 DOMException 异常 。9 isMap属性返回图像是否是服务器端图像映射。语法imageObject.isMap实例下面的例子可检测图像是否是服务器端图像映射:<html><body><img id="planets" src="planets.gif"width="145" height="126"usemap="#planetmap" /><map name="planetmap"&g

15、t;<area id="venus" shape="circle"coords="124,58,8"alt="The planet Venus"href="venus.htm" /></map><p>Is the image a server-side image map?<script type="text/javascript">x=document.getElementById('planets');doc

16、ument.write(x.isMap);</script></p></body></html>10 javaEnabled() 方法可返回一个布尔值,该值指示浏览器是否支持并启用了Java。如果是,则返回 true ,否则返回 false 。语法navigator.javaEnabled()提示和注释提示:可以使用navigator.javaEnabled()来检测当前浏览器是否支持Java ,从而知道浏览器是否能显示Java小程序。实例下面的例子讲返回当前浏览器是否已启用Java的布尔值:<html><body><

17、;script type="text/javascript">alert(navigator.javaEnabled()</script></body></html>输出:true11 lang属性可设置或返回元素的预言代码。语法bodyObject.lang=language-code实例下面的例子将展示获取<body> 元素的语言代码的两种方法:<html><body id="myid" lang="en-us"><script type=&quo

18、t;text/javascript">x=document.getElementsByTagName('body')0;document.write("Body language: " + x.lang);document.write("<br />");document.write("An alternate way: ");document.write(document.getElementById('myid').lang);</script></bo

19、dy></html>输出:Body language: en-usAn alternate way: en-us12 lang属性设置或返回元素的语言。语法:object.lang=language-code实例本例展示了两种获取<body> 元素的语言的方法:<html><body id="myid" lang="en-us"><script type="text/javascript">x=document.getElementsByTagName('bod

20、y')0;document.write("Body language: " + x.lang);document.write("<br />");document.write("An alternate way: ");document.write(document.getElementById('myid').lang);</script></body></html>13 lastModified属性可返回文档最后被修改的日期和时间。语法document.las

21、tModified说明该值来自于 Last-Modified HTTP头部,它是由 Web 服务器发送的可选项。实例<html><body>This document was last modified on:<script type="text/javascript">document.write(document.lastModified)</script></body></html>14 left属性设置定位元素左外边距边界与其包含块左边界之间的偏移。语法:可能的值值描述auto默认。通过浏览器来

22、计算左侧的位置。% 设置元素的左边到最近一个具有定位设置父元素的左边缘的百分比位置。使用 px 、 cm 等单位设置元素的左边到最近一个具有定位设置父元素的左边缘的位 length 置。可使用负值。提示和注释注释:如果 "position" 属性的值为 "static" ,那么设置 "left" 属性不会产生任何效果。实例下面的例子对按钮的左边进行设置:<html><head><style type="text/css">inputposition:absolute;</s

23、tyle><script type="text/javascript">function setLeftEdge()document.getElementById("b1").style.left="100px"</script></head><body><input type="button" id="b1" onclick="setLeftEdge()"value="Set left edge to 1

24、00 px" /></body></html>15 length属性可返回表单中元素的数目。语法formObject.length实例下面的例子可返回表单中元素的数目:<html><body><form id="myForm" method="get">Name: <input type="text" size="20" value="Peter Griffin" /><br />Text: &l

25、t;input type="text" size="20" value="Hello World" /> </form><script type="text/javascript">document.write("Number of elements in myForm: ");document.write(document.getElementById('myForm').length);</script></body>&l

26、t;/html>16 length属性可返回下拉列表中选项的数目。语法selectObject.length=number实例下面的例子可返回下拉列表的id :<html><head><script type="text/javascript">function getLength()alert(document.getElementById("mySelect").length)</script></head><body><form><select id=&

27、quot;mySelect"><option>Apple</option><option>Pear</option><option>Banana</option><option>Orange</option></select><input type="button" onclick="getLength()"value="How many options in the list?"></form

28、></body></html>17 letterSpacing属性设置字符之间的空白。语法:|length可能的值值描述normal 默认。定义字符间的标准空间。length定义字符间的固定空间。实例本例改变字符之间的空白:<html><head><script type="text/javascript">function changeLetterSpacing()document.getElementById("p1").style.letterSpacing="3"

29、; document.getElementById("p2").style.letterSpacing="-1"</script></head><body><p id="p1">This is an example paragraph.</p><p id="p2">This is another example paragraph.</p><input type="button" onclick="

30、;changeLetterSpacing()"value="Change letter-spacing" /></body></html>18 lineCap属性指定线段的末端如何绘制。语法CanvasRenderingContext2D.lineCap描述lineCap 属性指定线段如何结束。 只有绘制较宽线段时, 它才有效。这个属性的合法值如下表所示。默认值是: "butt" 。值含义这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正"butt"交,这条线段在其端点之外没

31、有扩展。这个值指定了线段应该带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且"round""square"这个值表示线段应该带有一个矩形线帽。这个值和自己的宽度的一半。"butt"一样,但是线段扩展了提示和注释注释: FireFox 1.5没有正确地实现"butt"线帽样式。 Butt线帽被当作是"square"线帽一样地绘制。19 lineHeight属性设置行之间的距离(行高)。语法:可能的值值描述normal 默认。设置合理的行间距。number 设置数字,此数字会与当前的字体尺寸相乘

32、来设置行间距。length设置固定的行间距。% 基于当前字体尺寸的百分比行间距。实例本例改变行高:<html><head><script type="text/javascript">function changeLineHeight()document.getElementById("div1").style.lineHeight="2"</script></head><body><div id="div1">This is so

33、me text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </div><br /><input type="button" onclick="changeLine

34、Height()"value="Change line-height" /></body></html>20 lineJoin属性说明如何绘制交点。语法CanvasRenderingContext2D.lineJoin描述当一个路径包含了线段或曲线相交的交点的时候, lineJoin 属性说明如何绘制这些交点。只有当绘制具有宽度的线条的时候,这一属性的效果才能表现出来。这一属性的默认值是"miter",它说明了两条线段的外边缘一直扩展到它们相交。当两条线段以一个锐角相交,斜角连接可能变得很长。 miterLimit

35、 属性为一个斜面的长度设置了上限。超过这一限制,斜面就变成斜角了。值 "round" 说明定点的外边缘应该和一个填充的弧接合,这个弧的直径等于线段的宽度。 "bevel" 值说明顶点的外边缘应该和一个填充的三角形相交。21 lineTo()方法为当前子路径添加一条直线。语法lineTo( x,y)参数参数描述x, y直线的终点的坐标。描述lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始,到 (x, y) 结束。当方法返回时,当前点是 (x,y) 。22 links集合可返回对文档中所有Area和 Link对象的引用。语法documen

36、t.links实例<html><body><img src="planets.gif"width="145" height="126"usemap="#planetmap" /><map name="planetmap"><area id="venus" shape="circle"coords="124,58,8"alt="Venus"href="venus.htm" /></map><br />Number of links in this document:<script type="text/javascript"></script></body></html>23 listStyleImage属性把图

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论