JS控制CSS

近排看了下JS，顺便也看了下CSS，然后突然想试一下JS控制CSS，毕竟将来可能会用到，上网查了下得到如下信息：

一赋值方式 :     用法：元素(节点).style.css属性
只不过css属性写法特殊点
一个单词的就直接写，中间用横杠的前一个开头字母小写，后一个开头字母大写，不用横杠链接
还有几个特殊，比如常见的css的float属性要写成
document.getElementById("div01").style.cssFloat;
因为float是js保留字。
其他的没是区别了
document.getElementById("div01").style.height;
document.getElementById("div01").style.lineHeight;
document.getElementById("div01").style.backgroundColor;

下面写了个深入一点的例子，自定义一个对象里面存放所需的CSS属性，然后利用这些属性设置当前节点样式：

function changeCss(){
    var s={backgroundColor:"#0099FF",width:"40px"};//包含了CSS属性
    var node=document.getElementById("a");获取节点
    for(var c in s){
      eval("node.style."+c+"=s[c]");//原本执行是这样的：node.style.proName=s[c];但由于proName（属性名）是未知的需要遍历s对象获取，所以需要使用eval函数，通过这个函数，存入的字符串可以当表达式执行，这是个很实用的方法哦！
    }
  }

二、利用节点的className属性改变其CSS

再有一种方式就是通过控制标签的class属性，用于更改整个CSS样式,用法：

<font id="a">aa</font>

/////////////////////////////////////////////////

<style id="css" type="text/css">

  .css{

     background:red;

   }

</style>

////////////////////////////////////////////////////

var node=document.getElementById("a");

node.className="css";

三、获取节点相关的CSS属性值

以上方式可以说都是向CSS设置值或更改CSS，如何获取当前节点的CSS样式属性值呢？查了很久终于查到：

IE下：node.currentStyle['属性名']

hh下：document.defaultView.getComputedStyle (node,null)['属性名'];

网上一个比较方法是：

function GetCurrentStyle (obj, prop) {

  if(obj.currentStyle){

    return obj.currentStyle[prop];

  }

else if (window.getComputedStyle) { 

 

propprop = prop.replace (/([A-Z])/g, "-$1");           

propprop = prop.toLowerCase ();        

return document.defaultView.getComputedStyle (obj,null)[prop];     

}

}