利用js来实现缩略语列表、文献来源链接和快捷键(2)

3  accesskey 属性可以将<a>链接与键盘的特定按键关联在一起,如:<a href="https://www.jb51.net/index.html" accesskey="1">Home</a>,不过好像不是所有的浏览器都支持这个属性,比如Opera。

将下面html代码中的accesskey属性像上面缩列语以列表的形式展示出来。

<ul> <li><a href="https://www.jb51.net/index.html" accesskey="1">Home</a></li> <li><a href="https://www.jb51.net/search.html" accesskey="4">Search</a></li> <li><a href="https://www.jb51.net/contact.html" accesskey="0">Contact</a></li> </ul>

代码如下:

function displayAccesskeys() { if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; // get all the links in the document var links = document.getElementsByTagName("a"); // create an array to store the accesskeys var akeys = new Array(); // loop through the links for (var i=0; i<links.length; i++) { var current_link = links[i]; // if there is no accesskey attribute, continue the loop if (current_link.getAttribute("accesskey") == null) continue; // get the value of the accesskey var key = current_link.getAttribute("accesskey"); // get the value of the link text var text = current_link.lastChild.nodeValue; // add them to the array akeys[key] = text; } // create the list var list = document.createElement("ul"); // loop through the accesskeys for (key in akeys) { var text = akeys[key]; // create the string to put in the list item var str = key + " : "+text; // create the list item var item = document.createElement("li"); var item_text = document.createTextNode(str); item.appendChild(item_text); // add the list item to the list list.appendChild(item); } // create a headline var header = document.createElement("h3"); var header_text = document.createTextNode("Accesskeys"); header.appendChild(header_text); // add the headline to the body document.body.appendChild(header); // add the list to the body document.body.appendChild(list); } addLoadEvent(displayAccesskeys);

最后实现的网页效果如下:

利用js来实现缩略语列表、文献来源链接和快捷键

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfzgs.html