下面的例子展示了你如何在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
分享到：
相关推荐
在JavaScript编程中，树型多列表动态生成是一种常见的交互式用户界面设计，它允许用户以层级结构查看和操作数据。这种控件常用于文件管理器、菜单系统、组织架构图等场景，提供了一种直观的方式来展示具有嵌套关系的...
压缩包子文件的文件名称列表“win8系统前端静态页面”暗示了这个压缩包可能包含了一系列模仿Windows 8系统风格的HTML文件。这可能包括各种页面模板，如主页面、设置页面、应用程序窗口等，每个文件都可能对应一个...
在XP风格窗口的设计中，CSS可以用来设置窗口边框的样式、背景颜色、按钮样式、窗口标题的字体和颜色，以及窗口拖动功能所需的鼠标光标样式等。例如，可以使用伪类`:hover`来改变鼠标悬停在窗口元素上时的样式，以...
为了确保下拉列表在不同设备上都能良好显示，可以使用媒体查询（Media Queries）来实现响应式设计。例如，为小屏幕设备调整字体大小： ```css @media (max-width: 768px) { select { font-size: 14px; } } ``` ...
在这个项目中，JavaScript可能被用来处理用户的输入事件，比如点击、滚动或悬停，进而触发相应的动画或改变页面状态。例如，当用户滚动页面时，某些元素可能会淡入淡出，或者水墨元素会随着滚动位置变化而流动。此外...
在IT行业中，HTML样式设计是构建用户界面的关键部分，尤其当涉及到特定的视觉风格时，如Windows 8的导航风格。Windows 8以其独特的“现代”或“Metro”设计语言闻名，这种设计语言强调简洁、大胆的颜色和扁平化的...
通过不同的风格设置，如U-Box、Mac和TM2008，我们可以让原本单调的选择框变得生动且吸引人。在实际项目中，根据设计要求选择合适的风格，并结合插件提供的API进行自定义，可以有效地提升用户的操作体验。
“html在线编辑器”标签表明这是一个基于HTML技术的编辑工具，可以在浏览器中运行，支持文本编辑、样式设置和富媒体插入等HTML文档的创建和编辑功能。“sina博客”标签则明确了这个编辑器是专门为新浪博客用户设计和...
HTML5 canvas 是一种在网页上绘制图形的API，它允许开发者通过JavaScript动态创建和修改二维图形，从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中，我们利用canvas元素来模仿经典的Windows屏保...
QT动态切换样式是一种在Qt应用程序中改变用户界面（UI）外观的方法，这主要通过使用Qt样式表（QSS，Qt Style Sheets）实现。QSS类似于HTML中的CSS，它允许开发者用类选择器、ID选择器等规则来定义控件的视觉效果，...
综上所述，"卡通动漫风格HTML5模板"不仅是一个视觉上吸引人的设计，更是结合了现代网页开发技术，以满足动漫企业和个人在互联网上的展示需求。通过精心设计和HTML5的功能应用，这种模板可以有效地吸引目标用户，提升...
HTML5列表式音乐播放器SMusic是一个基于前端技术构建的...开发者可以在此基础上进行自定义设计和扩展，以满足特定需求或风格。这个项目不仅展示了前端技术的实际应用，也为学习和实践相关技术提供了一个优秀的实例。
【好看流光风格个人主页HTML源码】是一个用于创建具有时尚、动态视觉效果的个人网站的HTML源代码包。这个源码集包含了设计独特的页面结构和流光效果，旨在为访客提供一种引人入胜的浏览体验。HTML是HyperText Markup...
- `transform`属性：用于改变元素的形状、尺寸和位置，实现平移、旋转、缩放等效果，可实现图片的动态布局。 - `transition`和`animation`：实现元素的平滑过渡和动画效果，增强用户体验。 - `flexbox`布局：灵活...
1. 下拉列表美化：文档的标题和描述强调了下拉列表的美观性，并提到适合使用在温馨风格的女性网站上。这说明在设计网站用户界面时，可以根据目标用户群体的偏好来定制下拉列表的外观。为了实现美观的下拉列表，设计...
尽管HTML 3.2已经提供了有限的动态元素，但动态HTML建立在HTML 3.2之上，提供了更为精细的控制和更丰富的动态特性。值得注意的是，为了充分利用动态HTML的所有最新功能，需要使用支持动态HTML的浏览器，如Netscape ...
在这个项目中，jQuery被用来增强原生HTML下拉列表的功能，如添加动态效果、响应式设计和自定义样式。 1. **基础概念** - **jQuery**: jQuery是JavaScript的一个轻量级库，通过简洁的API使得DOM操作变得简单。 - *...
2. 动态添加：利用JS可以动态生成新的表单元素，比如在列表中添加新条目，只需在适当的位置插入HTML代码即可。 3. 动态删除：同样，也可以用JS来移除列表中的某个条目，只需找到对应的DOM元素并执行删除操作。 4. ...
二次元风格个人引导页html源码是一个专为热爱二次元文化的用户设计的网页模板，它提供了简洁、美观的页面布局，让个人网站或博客在视觉上更具吸引力。这个压缩包包含了一个基本的HTML源码文件，用户只需用记事本等...