1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Explaining the Ddocument Ob Model</
title
>
<
script
src
=
"addLoadEvent.js"
></
script
>
<
script
src
=
"8.6.js"
></
script
>
</
head
>
<
body
>
<
ul
id
=
"navgation"
>
<
li
><
a
href
=
"index.html"
accesskey
=
"1"
>Home</
a
></
li
>
<
li
><
a
href
=
"search.html"
accesskey
=
"4"
>Search</
a
></
li
>
<
li
><
a
href
=
"contact.html"
accesskey
=
"9"
>Contact</
a
></
li
>
</
ul
>
<
p
><
b
>注释:</
b
>请使用Alt + <
i
>accessKey</
i
> (或者 Shift + Alt + <
i
>accessKey</
i
>) 来访问带有指定快捷键的元素。</
p
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
function
addLoadEvent(func){
//不管在页面加载完毕执行多少个函数,都应付自如
var
oldonload = window.onload;
if
(
typeof
window.onload !=
'function'
){
window.onload = func;
}
else
{
window.onload =
function
(){
oldonload();
func();
}
}
}
function
displayAccesskeys(){
//检查兼容性
if
(!document.getElementsByTagName||!document.createElement||!document.createTextNode)
return
false
;
var
links = document.getElementsByTagName(
"a"
);
var
akeys =
new
Array();
for
(
var
i = 0; i<links.length; i++){
var
current_link = links[i];
if
(!links[i].getAttribute(
"accesskey"
))
continue
;
var
key = current_link.getAttribute(
"accesskey"
);
var
text = current_link.lastChild.nodeValue;
//取得链接文本
akeys[key] = text;
}
var
list = document.createElement(
"ul"
);
for
(key
in
akeys){
//遍历访问键
var
text = akeys[key];
var
str = key +
": "
+text;
var
item = document.createElement(
"li"
);
var
item_text = document.createTextNode(str);
item.appendChild(item_text);
list.appendChild(item);
}
var
header = document.createElement(
"h3"
)
//创建标题;
var
header_text = document.createTextNode(
"Accesskeys"
);
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);
|
浏览器效果预览
本文转自 小旭依然 51CTO博客,原文链接:http://blog.51cto.com/xuyran/1783649