Anchor 对象学习
2013-01-21 22:24 lefan 阅读(308) 评论(0) 编辑 收藏 举报Anchor 对象表示 HTML 超链接。在 HTML 文档中 <a> 标签每出现一次,就会创建 Anchor 对象。锚可用于创建指向另一个文档的链接(通过 href 属性),或者创建文档内的书签(通过 name 属性)。您可以通过搜索 Document 对象中的 anchors[] 数组来访问锚,或者使用 document.getElementById()。
1.更改一个链接的文本、URL 以及 target
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function changeLink() 5 { 6 document.getElementById('myAnchor').innerHTML="访问 W3School" 7 document.getElementById('myAnchor').href="http://www.w3school.com.cn" 8 document.getElementById('myAnchor').target="_blank" 9 } 10 </script> 11 </head> 12 <body> 13 <a id="myAnchor" href="http://www.cnblogs.com/lefan">访问 lefan</a> 14 <input type="button" onclick="changeLink()" value="改变链接"> 15 <p>在本例中,我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self",这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank",链接将在新窗口中打开。</p> 16 </body> 17 </html>
Anchor 对象的属性列表
属性 |
描述 |
IE |
F |
O |
W3C |
设置或返回被链接资源的字符集。 |
6 |
1 |
9 |
Yes |
|
coords |
设置或返回逗号分隔列表,包含了图像映射中链接的坐标。 |
6 |
1 |
9 |
Yes |
设置或返回被链接资源的 URL。 |
5 |
1 |
9 |
Yes |
|
hreflang |
设置或返回被链接资源的语言代码。 |
6 |
1 |
9 |
Yes |
设置或返回一个链接的 id。 |
4 |
1 |
9 |
Yes |
|
设置或返回一个链接的内容。 |
4 |
1 |
9 |
No |
|
设置或返回一个链接的名称。 |
4 |
1 |
9 |
Yes |
|
设置或返回当前文档与目标 URL 之间的关系。 |
5 |
1 |
No |
Yes |
|
设置或返回目标 URL 与之间当前文档的关系。 |
5 |
1 |
No |
Yes |
|
设置或返回图像映射中某个链接的形状。 |
6 |
1 |
9 |
Yes |
|
设置或返回某个链接的 Tab 键控制次序。 |
6 |
1 |
9 |
Yes |
|
设置或返回在何处打开链接。 |
5 |
1 |
9 |
Yes |
|
设置或返回被链接资源的 MIME 类型。 |
6 |
1 |
9 |
Yes |
2. 使用 focus() 和 blur()
1 <html> 2 <head> 3 <style type="text/css"> 4 a:active {color:green} 5 </style> 6 <script type="text/javascript"> 7 function getfocus() 8 {document.getElementById('myAnchor').focus()} 9 function losefocus() 10 {document.getElementById('myAnchor').blur()} 11 </script> 12 </head> 13 <body> 14 <a id="myAnchor" href="http://www.cnblogs.com/lefan ">访问 lefan</a> 15 <br /><br/> 16 <input type="button" onclick="getfocus()" value="获得焦点"> 17 <input type="button" onclick="losefocus()" value="失去焦点"> 18 </body> 19 </html>
Anchor 对象的方法
方法 |
描述 |
IE |
F |
O |
W3C |
blur() |
把焦点从链接上移开。 |
5 |
1 |
9 |
Yes |
focus() |
给链接应用焦点。 |
5 |
1 |
9 |
Yes |