|
|
下面的例子展示了你如何在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 >circle</button> <button >disc</button> <button >square</button> <button >decimal</button> <button >decimal-leading-zero</button> <button >lower-greek</button> <button >upper-greek</button> <button >lower-roman</button> <button >upper-roman</button> <button >lower-alpha</button> <button >upper-alpha</button> <button >lower-latin</button> <button >upper-latin</button> <button >armenian</button> <button >georgian</button> <button >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
|
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡