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 属性的默认值不同所导致的。
通常的解决办法是：程序员自己指定该值，而不让浏览器使用其默认值即可。
本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2010/10/14/1851124.html，如需转载请自行联系原作者
