HTML DOM Style listStyleType 属性用于设置列表的标志类型。这个属性可以通过JavaScript来改变,并可以在不同的元素上使用。它支持的类型有:circle(空心圆形)、disc(实心圆形)、square(正方形)、decimal(数字)、lower-alpha(小写字母)、upper-alpha(大写字母)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)。
HTML DOM Style listStyleType 属性
HTML DOM Style listStyleType 属性用于设置列表项标志的类型。
在 HTML 中,列表通常用 <ul> 和 <ol> 元素来标记。而在 CSS 中,我们可以通过设置 list-style-type 属性来改变列表项的标志类型。
语法
listStyleType 属性的语法如下:
element.style.listStyleType = "circle|disc|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none|inherit"
其中,值得注意的是:
- circle:表示使用实心圆作为标记。
- disc:表示使用实心圆点作为标记。
- square:表示使用实心正方形作为标记。
- decimal:表示使用数字作为标记。
- lower-roman:表示使用小写罗马数字作为标记。
- upper-roman:表示使用大写罗马数字作为标记。
- lower-alpha:表示使用小写字母作为标记。
- upper-alpha:表示使用大写字母作为标记。
- none:表示不使用任何标记。
- inherit:表示继承父元素的标记类型。
示例
下面是 listStyleType 属性的示例:
<html> <head> <title>listStyleType 属性示例</title> <style> ul { list-style-type: circle; } ol { list-style-type: upper-roman; } </style> </head> <body> <ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul> <ol> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol> </body> </html>
上面的 HTML 代码会显示一个使用实心圆作为标记的无序列表,和一个使用大写罗马数字作为标记的有序列表。
总结
HTML DOM Style listStyleType 属性用于设置列表项标志的类型,可以使用的值包括实心圆、实心圆点、实心正方形、数字、小写/大写罗马数字、小写/大写字母以及不使用任何标记。通过设置 list-style-type 属性,我们可以改变列表项的标记类型,从而让页面更加美观、易读。