3.10.2  <ol>元素

3.10.2 <ol>元素

在HTML 5中，<ol>元素用于在页面中有序的创建列表。与HTML 4相比，在HTML 5中新增加了如下两个属性：

■start：用于自定义列表项开始的编号。

■reversed：用于设置列表是否进行反向排序。

接下来将通过一个实例讲解将网页中的内容分组列表显示的方法。

在本实例中，通过<ol>元素创建一个“MTV排行榜”列表，并分别添加三个选项（AA、BB、CC）作为列表的内容。另外，增加一个文本框“设置开始值”与一个“确定”按钮；在文本框中输入一个值并单击“确定”按钮后，将以文本框中的值为列表项开始的编号显示MTV排行榜。

实例文件12.html”的具体代码如下。

在上述JavaScript代码中，先定义一个函数Btn_Click（），用于在单击“确定”按钮时调用。在该函数中先获取输入文本的值与<ol>列表元素，并分别保存至变量“strNum”与“strDiv”中。然后通过<setAttribute>方法将列表元素的“start”属性设置为变量“strNum”的值，从而改变了列表项元素编号的开始值。例如本实例在文本框中输入数字7那么，列表项元素的编号起始值将从7开始。

执行后的效果如图3-19所示，如果在文本框中输入一个数字，例如7单击“确定”按钮后将以7开始进行排序，如图3-20所示。

图3-19 执行效果

图3-20 排序效果