在HTML列表下动态改变列表位置风格
日期：2014-05-17 浏览次数：20875 次
在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
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
