在HTML列表上动态改变列表位置风格
下面的例子展示了你如何在list上动态改变list-style-type。
<!DOCTYPE HTML><html><head> <title>Changing the bullet type on an HTML list</title> <style type="text/css"> ul#list { /* list-style-type: circle; */ } </style></head><body> <div> <button onclick="setListStyleType('circle');">circle</button> <button onclick="setListStyleType('disc');">disc</button> <button onclick="setListStyleType('square');">square</button> <button onclick="setListStyleType('decimal');">decimal</button> <button onclick="setListStyleType('decimal-leading-zero');">decimal-leading-zero</button> <button onclick="setListStyleType('lower-greek');">lower-greek</button> <button onclick="setListStyleType('upper-greek');">upper-greek</button> <button onclick="setListStyleType('lower-roman');">lower-roman</button> <button onclick="setListStyleType('upper-roman');">upper-roman</button> <button onclick="setListStyleType('lower-alpha');">lower-alpha</button> <button onclick="setListStyleType('upper-alpha');">upper-alpha</button> <button onclick="setListStyleType('lower-latin');">lower-latin</button> <button onclick="setListStyleType('upper-latin');">upper-latin</button> <button onclick="setListStyleType('armenian');">armenian</button> <button onclick="setListStyleType('georgian');">georgian</button> <button onclick="setListStyleType('none');">none</button> </div> <h1 id="type">disc (default)</h1> <ul id="list"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur felis mauris, vestibulum ac cursus et, interdum ac orci. Nullam lobortis, est vel imperdiet lobortis, nunc arcu rutrum ligula, id volutpat sem nulla in purus.</li> <li>Curabitur quis felis dolor, sed lacinia dui. Praesent imperdiet viverra suscipit.</li> <li>Maecenas tincidunt enim eget erat semper vehicula eleifend libero viverra.</li> <li>Vestibulum vel nisl turpis, vitae placerat risus. Mauris nec lorem sit amet nisi faucibus rhoncus.</li> <li>Nulla facilisi. Donec iaculis rutrum fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li> <li>Fusce pharetra molestie mauris pellentesque tempor. Curabitur fermentum commodo commodo. Mauris egestas rutrum arcu eu interdum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur felis mauris, vestibulum ac cursus et, interdum ac orci. Nullam lobortis, est vel imperdiet lobortis, nunc arcu rutrum ligula, id volutpat sem nulla in purus.</li> <li>Curabitur quis felis dolor, sed lacinia dui. Praesent imperdiet viverra suscipit.</li> <li>Maecenas tincidunt enim eget erat semper vehicula eleifend libero viverra.</li> </ul> <script type="text/javascript"> var list = document.getElementById("list"); var type = document.getElementById("type"); function setListStyleType(value) { list.style.listStyleType = value; type.innerText = list.style.listStyleType; } </script> </body></html>?源码下载：
?
changing-the-bullet-type-on-an-html-list.zip
?
?