下面的例子展示了你如何在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
分享到：
相关推荐
7.2 了解文档位置和路径 7.2.1 绝对路径 7.2.2 文档相对路径 7.2.3 区分uri、url和urn 7.2.4 区分本地链接和服务器链接 7.3 使用a元素定义链接 7.3.1 定义链接的目标uri(href属性) 7.3.2 定义链接的目标窗口(target...
超多动画风格的HTML5画布雪花特效，为你的网页增加雪花飘飞特效，一共有6个雪花特效，每款HTML对应一种雪花效果，结合 jquery插件来实现的，...可把雪花设置成平面圆球的风格，可综合学习HTML5 Canvas的动画生成能力。
HTML5 SVG实现带时间轴风格的闹钟设置效果源码.zip
jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件。该音频播放器可以设置音频播放列表，每首曲子的封面，标题等，还可以控制歌曲的播放和快进，而且它使用上非常简单。
html实现酷炫科技风大屏风格模板源码，html大屏源码，科技风，酷炫的界面效果，灵活的模块配置，打造属于自己的酷炫大屏，全屏打开页面，Ctrl+鼠标滚轮，找到最合适的分辨率，展现最好的界面效果。支持扩展界面，...
EditPlus 3+zendCoding+自配的色彩风格+HTML、CSS语法文件，全部的功能都有了，配色也用了一个下午，语法文件也一并加进来了，其中HTML5的元素也在语法文件中了，CSS3的暂时还没有加入，有需要的朋友也可以自行加入...
这是经过我精心调整，花了两天工时的，来之不易，请各位IDEA的开发朋友们善待之！ 【使用方法】： 1、打开IDEA ...3、选择Impor Setting 4、选择您需要导入的项，一般选择要的界面字体样式就好了。
jQuery结合HTML5技术实现的全屏幻灯片特效，带有滑块效果，实际上，本款幻灯片是近50种HTML5 jQuery实现的图片幻灯动画切换风格和模式特效演示，在Chrome浏览器打开后，选择一种动画风格，图片显示的方式立即改变，...
可以实现网站的不同风格切换 附带源码和作者说明 作者链接:http://www.cnblogs.com/JimmyZhang/archive/2008/04/25/1170145.html
超强的HTML5 CSS多风格按钮在线生成器代码，一共有29款按钮样式。本按钮样式集是从国外的CSS Button Generator 整理下来的。如果有需要的朋友可以放到自己的站点下，在需要的时候直接打开，复制需要的CSS样式以及...
每个模板都经过精心设计，不仅具备美观的界面，还确保了在不同设备上的完美呈现和流畅体验。 更令人兴奋的是，这些模板配备了详细的教程和友好的代码结构，即使是初学者也能轻松上手。它们是你在短时间内搭建专业...
所有内容、栏目的模板模板均可在栏目设置中自由指定。以下列举系统默认模板文件： 全站首页： index.html 通用头部模板： head.html 通用尾部模板： bottom.html 文章(article频道)模板： 栏目聚合页：article/...
可以选择设置图片水印或文字水印，并可设置水印嵌入图片的位置，设置水印可以有效防止图片盗链，同时不易被修改和使用，更能表现出一个网站的特色风格，设置好水印后，添加商品上传图片时，会自动在图片上嵌入水印...
在目录编辑窗口左侧，从上到下排列有11个按钮，前5个分别是：目录表属性设置、插入标题、插入页面、编辑所选标题或页面属性、删除标题或页面，下面4个箭头用来调整所选标题或页面的位置及从属关系，最后两个分别是...
“博士WIN7风格包”能把“XP / 2003 简体中文版”美化为 Windows 7 风格，国内首创！ 只有 VS 主题，无 WB 主题，WB 主题暂不加入。 补充完善诸多细节，强化卸载干净程度 补充说明： 1.快速启动大图标设置方法：先...
国人原创多风格自适应wordpress主题：youleb 来自 峰尚的原创wordpress主题，多种实用功能，强大的设置，13种配色主题风格多方位照顾不同人使用。主要适合博客类型站长使用，并且内置了产品或作品展示独立页面。 ...
md2html 从Markdown文件生成漂亮CSS风格HTML页面如何使用md2html README.md > docs.html 或者，您可以使用选项-o而不是>来指定输出文件。改变风味md2html -f mini README.md > docs.html 可用口味（单击预览）： —...
4、简述在以Dreamweaver开发网页的过程中，如何在一个网页中设置不断在屏幕上跑动的小图片？要求说明具体的操作过程。 5、什么是JavaScript，JavaScript在网页设计中主要发挥什么作用？ 如果当前表单域为xsxh...