代码改变世界

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 

charset

设置或返回被链接资源的字符集。

6

1

9

Yes

coords

设置或返回逗号分隔列表，包含了图像映射中链接的坐标。

6

1

9

Yes

href

设置或返回被链接资源的 URL。

5

1

9

Yes

hreflang

设置或返回被链接资源的语言代码。

6

1

9

Yes

id

设置或返回一个链接的 id。

4

1

9

Yes

innerHTML

设置或返回一个链接的内容。

4

1

9

No

name

设置或返回一个链接的名称。

4

1

9

Yes

rel

设置或返回当前文档与目标 URL 之间的关系。

5

1

No

Yes

rev

设置或返回目标 URL 与之间当前文档的关系。

5

1

No

Yes

shape

设置或返回图像映射中某个链接的形状。

6

1

9

Yes

tabIndex

设置或返回某个链接的 Tab 键控制次序。

6

1

9

Yes

target

设置或返回在何处打开链接。

5

1

9

Yes

type

设置或返回被链接资源的 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