在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

 

 

你可能感兴趣的:(css)