JavaScript 拾碎[三] 使用className 属性
A 三位一体的页面
网页的结构层（Structure ）由HTML 或XHTML 创建；
网页的表现层（Presentation ）由CSS 来创建；
网页的行为层（Behavior ）由Javascript 和DOM 所完成；
其实，网页的表现层和行为层总是存在的，即使用户没有去定义。因为Web 浏览器会把自身默认的样式和事件加载到网页的结构层上。
B 使用className 属性
Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。
代码示例：
| <html> |
| <head> |
| <title>追加CSS类别</title> |
| <style type="text/css"> |
| .myUL1{ |
| color:#0000FF; |
| font-family:Arial; |
| font-weight:bold; |
| } |
| .myUL2{ |
| text-decoration:underline; |
| } |
| </style> |
| <script language="javascript"> |
| function check(){ |
| var oMy = document.getElementsByTagName("ul")[0]; |
| oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格. |
| } |
| </script> |
| </head> |
| <body> |
| <ul onclick="check()" class="myUL1"> |
| <li>HTML</li> |
| <li>JavaScript</li> |
| <li>CSS</li> |
| </ul> |
| </body> |
| </html> |
运行时，单击列表后，实际上<ul> 的class 属性变为：
| <ul onclick="check()" class="myUL1 myUL2"> |
注意：
i > 如果是直接修改className 属性值，则是对CSS 进行替换；
ii > 但以上代码不是将原有的CSS 样式覆盖，而是对现有CSS 样式进行追加。
追加的前提是：保证追加的CSS 与原先的CSS 不重复；
经验：
浏览器之间显示的差异，通常都是因为各个浏览器本身对CSS 属性的默认值不同所导致的。
通常的解决办法是：程序员自己指定该值，而不让浏览器使用其默认值即可。
| 作者： XuGang 网名：钢钢 |
| 出处： http://xugang.cnblogs.com |
| 声明： 本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址！ |
分类:
JavaScript
标签:
JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架