dom修改css样式

CSS-DOM:
style属性是对象类型
nodeName是tring类型
如果文档的内容需要定期编辑和刷新 添加class属性的工作就会变成一种负担 
 如果文档内容需要一个CMS来处理  给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的
font-size属性要用元素.style.fontSize来检索

考虑纯粹用css还是用DOM设置样式 需要考虑这些问题：
1最简单的解决方案
2.那种解决方案得到更多浏览器的支持
一般改变元素的呈现效果用css
改变某元素的行为用dom
如果是根据行为改变呈现效果  那就要考虑情况了  例子：+

响应事件：  可以使用伪class属性允许我们根据html元素的状态来改变样式 比如 
a：hover{
    color：#c60；
}  这个伪类基本上只是用来改变链接的样式

利用DOM可以实现 鼠标移动到某表格的行时字体加黑加粗
function rowsd(){
    if(!document.getElementByTagName) return false;
    var rows=document.getElementByTagName("tr");
    for(var i=0;ifunction(){
            this.style.fontWeight="bold";    //指当前行
        }
        rows[i].onmouseout=function(){
            this.style.fontWeight="normal";
        }
    )
}
addLoadEvent(rowsd);
元素的属性style只有在内联的时候才可以检索  如果script放在head或者css外部调用的时候 style是无法获取信息的  
但是 还可以通过style来设置各种html呈现效果 是可以用style检索的 你用dom设置的样式也可以用dom来检索 举例：
function getNextElement(node) {
  if(node.nodeType == 1) {
    return node;
  }
  if (node.nextSibling) {
    return getNextElement(node.nextSibling);
  }
  return null;
}

function xx(){
    var headers=document.getElement("h1");
    for(var i;ivar elem=getNextElement(headers[i].nextSibling);
        elem.style.fontWeight="bold";
        elem.style.fontSize="1.2em";       //通过DOM来设置css 就可以通过style来检索了
    }

}
在事件发生时设置有关元素的样式
根据某种条件反复设置某种样式
html:

  

    
Itinerary
    

    

      
When
      
Where
    
    
    

    

      
June 9th
      
Portland, "Oregon">OR
    
    

      
June 10th
      
Seattle, "Washington">WA
    
    

      
June 12th
      
Sacramento, "California">CA
    
    
  

css：
body {
  font-family: "Helvetica","Arial",sans-serif;
  background-color: #fff;
  color: #000;
}
table {
  margin: auto;
  border: 1px solid #699;
}
caption {
  margin: auto;
  padding: .2em;
  font-size: 1.2em;
  font-weight: bold;
}
th {
  font-weight: normal;
  font-style: italic;
  text-align: left;
  border: 1px dotted #699;
  background-color: #9cc;
  color: #000;
}
th,td {
  width: 10em;
  padding: .5em;
}
.odd {
  background-color: #ffc;
}

js：
function  stritable(){
    if(!document.getElementByTagName) return false;
    var tables=document.getElementByTagName("table");
    var odd,rows;
    for(var i=0;ifalse;
        rows=tables[i].getElementByTagName("tr");
        for(var j=0;jif(odd){
                    rows[i].style.backgroundColor="#ffc";
                    odd=false;
            }else{
                odd=true;
            }
        }
    }
}


但是这样子 如果需要修改就需要寻找这个函数 然后修改 比较麻烦
可以采用这个方法：
elem.setAttribute("class","intro");
也可以用 className属性完成  元素节点才有
元素.className=value；
这样 在value样式类中修改即可
可是这样子就是直接覆盖掉了
如果想要追加可以这样
elem.className+=" intro";    intro前面有空格

现在css样式里面添加一i套声明   这样只要修改add就可以来改变样式了
.add{
    background-color:#ffc;
}
举例：function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; ivar odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; jif (odd == true) {
        addClass(rows[j],"odd");
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
addLoadEvent(stripeTables);

要学会对函数进行抽象 可以增加通用性 如：
function stripeTables(Tag,Name) {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName(Tag);
  for (var i=0; ivar odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; jif (odd == true) {
        addClass(rows[j],Name);
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}