使用className属性来指定结点的样式

时间：2014-2-7

   如何使用Javascript对元素样式进行完全的控制,但每指定一个属性都需要对style的属性赋一次值,这样不仅代码冗余很多,而且将外观代码整合到了程序之中,不利于修改和维护,而使用结点className属性来实现CSS控制可以避免这个问题.
   结点的className属性对应于标记中的class属性.结合CSS类型选择器,可以实现指改变元素样式的效果.如:
<select onchange="document.getElementByid('div1').className=this.Value">
  <option value="style1">选择样式</option>
  <option value="style1">样式一</option>
  <option value="style2">样式二</option>
</select>
   在列表标记中使用onchange事件来捕获用户选择的样式,并用className来指定的样式应用到div上.
   由此可见,使用Javascript结合元素结点的className属性,可以将程序逻辑和表现逻辑分开,当需要改变显示效果时,只需要改变CSS的内容即可,真正做到了表现和结构的相分离.