点击文字切换网页字体样式：JavaScript与CSS实战

本篇文章主要介绍了如何使用JavaScript在网页上动态实现页面样式的变化，通过用户的交互触发样式切换。具体实现过程涉及到了HTML、CSS和JavaScript的结合应用。 首先，HTML部分展示了网页的基本结构，包含两个无序列表（`<ul>`），其中一个是默认样式（`myUL1`），另一个具有点击事件（`onclick="check()"`）。`<meta>`标签设置了字符集，`<title>`标签定义了页面标题为"test"。 JavaScript代码部分是关键，定义了一个名为`check()`的函数。这个函数的作用是根据`mylist`元素的当前类名来切换其样式。`getElementById()`方法获取id为"mylist"的元素，`getAttribute()`方法检查其当前的class属性。如果当前类名是"myUL1"，则将其改为"myUL2"，反之亦然。这样，当用户点击带有`onclick`事件的列表项时，就会触发这个函数，从而改变列表项的字体颜色和字体风格。 CSS部分则是用于定义两种不同的样式规则： - `.myUL1`规则设置了字体颜色为蓝色（#0000ff），字体为Arial、Helvetica或sans-serif系列，且文字加粗。 - `.myUL2`规则设置颜色为红色（#ff0000），字体为Georgia、Times New Roman、Times或serif系列。 整个流程是这样的：用户点击列表项时，JavaScript检测到该元素的类名，调用`check()`函数，根据类名切换样式，使字体颜色和字体类型发生变化，从而实现了页面样式的实时切换，增强了用户体验。 通过这篇文章，读者可以学习到如何利用JavaScript控制HTML元素的样式，以及如何通过用户交互来动态更新页面内容的呈现。这种技术在前端开发中非常常见，尤其是在需要响应式设计或者动态交互的网站中，能够提升页面的灵活性和吸引力。