在HTML列表上动态改变列表位置风格

最新推荐文章于 2021-06-05 01:23:06 发布

zlpx1983

最新推荐文章于 2021-06-05 01:23:06 发布

阅读量341

点赞数

分类专栏： HTML5 JavaScript 文章标签： css

本文链接：https://blog.csdn.net/zlpx1983/article/details/84233260

版权

HTML5 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

19 篇文章 0 订阅

订阅专栏

下面的例子展示了你如何在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 οnclick="setListStyleType('circle');">circle</button>
        <button οnclick="setListStyleType('disc');">disc</button>
        <button οnclick="setListStyleType('square');">square</button>
 
        <button οnclick="setListStyleType('decimal');">decimal</button>
        <button οnclick="setListStyleType('decimal-leading-zero');">decimal-leading-zero</button>
 
        <button οnclick="setListStyleType('lower-greek');">lower-greek</button>
        <button οnclick="setListStyleType('upper-greek');">upper-greek</button>
        <button οnclick="setListStyleType('lower-roman');">lower-roman</button>
        <button οnclick="setListStyleType('upper-roman');">upper-roman</button>
        <button οnclick="setListStyleType('lower-alpha');">lower-alpha</button>
        <button οnclick="setListStyleType('upper-alpha');">upper-alpha</button>
        <button οnclick="setListStyleType('lower-latin');">lower-latin</button>
        <button οnclick="setListStyleType('upper-latin');">upper-latin</button>
 
        <button οnclick="setListStyleType('armenian');">armenian</button>
        <button οnclick="setListStyleType('georgian');">georgian</button>
 
        <button οnclick="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

zlpx1983

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在HTML列表上动态改变列表位置风格

下面的例子展示了你如何在list上动态改变list-style-type。&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Changing the bullet type on an HTML list&lt;/title&gt; &lt;style type="text/css"&amp
复制链接

扫一扫

专栏目录