不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。 复制代码 代码如下: <BR>// 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果 <BR>var footNotes = function(){}; <BR>footNotes.prototype = { <BR>footNoteClassName : "footnote", // 脚注的 className <BR>footNoteTagName : "span", // 脚注的标签名 <BR>footNoteBackLink : " [back]", // 返回链接 <BR>format : function(contentID, footnoteID) <BR>{ <BR>if (!document.getElementById) return false; <BR>var content = document.getElementById(contentID); <BR>var footnote = document.getElementById(footnoteID); <BR>var spans = content.getElementsByTagName(this.footNoteTagName); <BR>var noteArr = []; <BR>var note = 0; <BR>var elContent; <BR>var len = spans.length; <BR>for (i=0; i<len; i++) <BR>{ <BR>note ++; <BR>if (spans[i].className == this.footNoteClassName) <BR>{ <BR>// 获取脚注内容 <BR>elContent = spans[i].innerHTML; <BR>noteArr.push(elContent); <BR>// 创建一个指向脚注的链接 <BR>var newEle = document.createElement( "a" ); <BR>newEle.href = '#ftn_' + footnoteID + '_' + note; <BR>newEle.title = "show footnote"; <BR>newEle.id = 'ftnlink_'+footnoteID+'_' + note; <BR>newEle.innerHTML = note; <BR>// 清空原有内容 <BR>while (spans[i].childNodes.length) <BR>{ <BR>spans[i].removeChild( spans[i].firstChild ); <BR>} <BR>spans[i].appendChild( newEle ); <BR>} <BR>} <BR>// 创建注释列表 <BR>var ul = this.__buildNoteList(noteArr, footnoteID); <BR>footnote.appendChild(ul); <BR>}, <BR>__buildNoteList : function(notes, noteID) <BR>{ <BR>if(!notes || notes.length < 1) return; <BR>var ul = document.createElement('ul'); <BR>ul.className = this.footNoteClassName; <BR>var li; <BR>var len = notes.length + 1; <BR>for(i=1; i<len; i++) <BR>{ <BR>li = document.createElement('li'); <BR>li.id = "ftn_"+noteID+"_"+i; <BR>li.innerHTML = notes[i-1]; <BR>// 创建【返回】链接 <BR>var link = document.createElement("a"); <BR>link.href = "#ftnlink_" + noteID + "_" + i; <BR>link.innerHTML = this.footNoteBackLink; <BR>li.appendChild( link ); <BR>ul.appendChild( li ); <BR>} <BR>return ul; <BR>} <BR>}; <BR> 要实现脚注，我们需要下列元素： 复制代码 代码如下: CSS CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 其中： article1 是你需要脚注的文章主体 .. 是注释内容，标签 span 和 class 均可配置。 artnotes1 是显示脚注的地方 按照默认的设置调用方式： 复制代码 代码如下: <BR>var footnote = new footNotes(); <BR>footnote.format('article1','artnotes1'); <BR> 如果你想自定义一些内容，可以用下面的方式： 复制代码 代码如下: <BR>var footnote = new footNotes(); <BR>footnote.footNoteClassName = "footnote2"; <BR>footnote.footNoteTagName = "em"; <BR>footnote.footNoteBackLink = " [back «]"; <BR>footnote.format('article1','artnotes1'); <BR> 测试代码：将下面的代码保存运行。 复制代码 代码如下:
