JS框架frame模板.docx
- 文档编号:12836116
- 上传时间:2023-06-08
- 格式:DOCX
- 页数:24
- 大小:21.22KB
JS框架frame模板.docx
《JS框架frame模板.docx》由会员分享,可在线阅读,更多相关《JS框架frame模板.docx(24页珍藏版)》请在冰点文库上搜索。
JS框架frame模板
1frame属性可设置或返回表格的外部边框。
语法
tableObject.frame=void|above|below|hsides|vsides|lhs|rhs|box|border
实例
下面的例子设置了表格的两种不同的边框:
functionaboveFrames()
{
document.getElementById('myTable').frame="above"
}
functionbelowFrames()
{
document.getElementById('myTable').frame="below"
}
value="Showaboveframes"> value="Showbelowframes"> 2frameBorder属性设置或返回是否显示框架周围的边框。 如果不希望出现框架的边框,请把该属性设置为0。 语法 frameObject.frameBorder=1|0 实例 在我们的例子中,首先将创建包含带有两个列的框架集的HTML文档。 每列设置为浏览器窗口的50%: src="frame_frameborder.htm"> HTML文档"frame_frameborder.htm"被放入第一列,而HTML文档"frame_a.htm"被放入第二列。 下面是"frame_frameborder.htm"的源代码: x=parent.document.getElementById("leftFrame"); y=parent.document.getElementById("rightFrame"); document.write("FrameborderforleftFrameis: "); document.write(x.frameBorder); document.write(" "); document.write(y.frameBorder); 3frameBorder属性可设置或返回是否显示iframe周围的边框。 把该属性设置为0,可以获得无边框的框架。 语法 iframeObject.frameBorder=1|0 实例 本例可设置iframe是否拥有边框: functionremoveBorder() { document.getElementById("frame1").frameBorder="0"; } functionrestoreBorder() { document.getElementById("frame1").frameBorder="1"; }
FrameborderforrightFrameis:
value="Removeborder"/> value="Restoreborder"/> 4getContext()方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数contextID指定了您想要在画布上绘制的类型。 当前唯一的合法值是"2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图API。 提示: 在未来,如果 返回值 一个CanvasRenderingContext2D对象,使用它可以绘制到Canvas元素中。 描述 返回一个表示用来绘制的环境类型的环境。 其本意是要为不同的绘制类型(2维、3维)提供不同的环境。 当前,唯一支持的是"2d",它返回一个CanvasRenderingContext2D对象,该对象实现了一个画布所使用的大多数方法。 5getElementById()方法可返回对拥有指定ID的第一个对象的引用。 语法 document.getElementById(id) 说明 HTMLDOM定义了多种查找元素的方法,除了getElementById()之外,还有getElementsByName()和getElementsByTagName()。 不过,如果您需要查找文档中的一个特定的元素,最有效的方法是getElementById()。 在操作文档的一个特定的元素时,最好给该元素一个id属性,为它指定一个(在文档中)唯一的名称,然后就可以用该ID查找想要的元素。 实例 例子1 functiongetValue() { varx=document.getElementById("myHeader") alert(x.innerHTML) }
Clickontheheadertoalertitsvalue
例子2
getElementById()是一个重要的方法,在DOM程序设计中,它的使用非常常见。
我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用getElementById()方法了:
functionid(x){
if(typeofx=="string")returndocument.getElementById(x);
returnx;
}
上面这个函数接受元素ID作为它们的参数。
对于每个这样的参数,您只要在使用前编写x=id(x)就可以了。
6getElementsByName()方法可返回带有指定名称的对象的集合。
语法
document.getElementsByName(name)
该方法与getElementById()方法相似,但是它查询元素的name属性,而不是id属性。
另外,因为一个文档中的name属性可能不唯一(如HTML表单中的单选按钮通常具有相同的name属性),所有getElementsByName()方法返回的是元素的数组,而不是一个元素。
实例
functiongetElements()
{
varx=document.getElementsByName("myInput");
alert(x.length);
}
value="Howmanyelementsnamed'myInput'? "/> 7getElementsByTagName()方法可返回带有指定标签名的对象的集合。 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName()方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串"*"传递给getElementsByTagName()方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。 提示和注释 注释: 传递给getElementsByTagName()方法的字符串可以不区分大小写。 实例 例子1
functiongetElements()
{
varx=document.getElementsByTagName("input");
alert(x.length);
}
value="Howmanyinputelements? "/> 例子2 可以用getElementsByTagName()方法获取任何类型的HTML元素的列表。 例如,下面的代码可获取文档中所有的表: vartables=document.getElementsByTagName("table"); alert("Thisdocumentcontains"+tables.length+"tables"); 例子3 如果您非常了解文档的结构,也可以使用getElementsByTagName()方法获取文档中的一个特定的元素。 例如,下面的代码可以获得文档中的第四个段落: varmyParagragh=document.getElementsByTagName("p")[3]; 不过,我们还是认为,如果您需要操作某个特定的元素,使用getElementById()方法将更为有效。 8globalCompositeOperation属性说明如何在画布上组合颜色。 语法 CanvasRenderingContext2D.globalCompositeOperation 描述 globalCompositeOperation属性说明了绘制到画布上的颜色是如何与画布上已有的颜色组合(或“合成”)的。 下面的表格列出了可能的值及其含义。 这些值中的"source"一词,指的是将要绘制到画布上的颜色,而"destination"指的是画布上已经存在的颜色。 默认值是"source-over"。 值 含义 "copy" 只绘制新图形,删除其他所有内容。 "darker" 在图形重叠的地方,颜色由两个颜色值相减后决定。 "destination-atop" 已有的内容只有在它和新的图形重叠的地方保留。 新图形绘制于内容之后。 "destination-in" 在新图形以及已有画布重叠的地方,已有内容都保留。 所有其他内容成为透明的。 "destination-out" 在已有内容和新图形不重叠的地方,已有内容保留。 所有其他内容成为透明。 "destination-over" 新图形绘制于已有内容的后面。 "lighter" 在图形重叠的地方,颜色由两种颜色值的加值来决定。 "source-atop" 只有在新图形和已有内容重叠的地方,才绘制新图形。 "source-in" 在新图形以及已有内容重叠的地方,新图形才绘制。 所有其他内容成为透明。 "source-out" 只有在和已有图形不重叠的地方,才绘制新图形。 "source-over" 新图形绘制于已有图形的顶部。 这是默认的行为。 "xor" 在重叠和正常绘制的其他地方,图形都成为透明的。 提示和注释 注释: FireFox1.5不支持"copy"值或"darker"值。 9go()方法可加载历史列表中的某个具体的页面。 语法 history.go(number|URL) 说明 URL参数使用的是要访问的URL,或URL的子串。 而number参数使用的是要访问的URL在History的URL列表中的相对位置。 实例 下面例子会加载历史列表中的前一个页面:
functiongoBack()
{
window.history.go(-1)
}
10hash属性可设置或返回一个区域中URL的锚部分。
语法
areaObject.hash=anchorname
实例
下面的例子可把URL的锚部分#top更改为#bottom:
functionchangeLink()
{
document.getElementById('venus').hash="bottom"
}
width="145"height="126" usemap="#planetmap"/> coords="124,58,8" alt="Venus" href="venus2.htm#top"/> 11height属性可设置或返回iframe的高度(以像素或百分比为单位)。 语法 iframeObject.height=pixels 实例 下面的例子可更改iframe的高度: functionchangeHeight() { document.getElementById("frame1").height="200"; }
value="Changeheight"/> 12height属性可设置或返回图像的高度。 语法 imageObject.height=pixels 实例 下面的例子可设置图像的高度和宽度:
functionchangeSize()
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
value="Changesizeofimage"> 13height属性声明了显示浏览器的屏幕的高度,以像素计。 语法 screen.height 实例
document.write("
Height:
")
document.write(screen.height+"
")14height属性设置元素的高度。
语法:
Object.style.height=auto|length|%
可能的值
值
描述
auto
默认。
浏览器会计算出实际的高度。
length
使用px、cm等单位定义高度。
%
基于其包含块的百分比高度。
实例
本例设置按钮的高度:
functionsetHeight()
{
document.getElementById("b1").style.height="50px";
}
value="Changeheightofbuttonto50px"/> 15host属性可设置或返回URL的主机名和端口。 语法 areaObject.host=host 实例 下面的例子可返回"Venus"区域的主机名和端口:
width="145"height="126" usemap="#planetmap"/> coords="124,58,8" alt="Venus" href="venus.htm"/> Thehostnameandportforthe"Venus"areaare: x=document.getElementById('venus'); document.write(x.host); 16host属性是一个可读可写的字符串,可设置或返回当前URL的主机名称和端口号。 语法 location.host 实例 假设当前的URL是: : 1234/test.htm#part2:
document.write(location.host);
输出:
:
1234
17hostname属性是一个可读可写的字符串,可设置或返回当前URL的主机名。
语法
location.hostname
实例
假设当前的URL是:
.com:
1234/test.htm#part2:
document.write(location.hostname);
输出:
18href属性可设置或返回被链资源的URL。
语法
anchorObject.href=URL
实例
下面的例子将更改一个链接的文本、URL以及target:
functionchangeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="";
document.getElementById('myAnchor').target="_blank";
}
18href属性可设置或返回图像映射中链接的URL。
语法
areaObject
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JS 框架 frame 模板