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];     

}

}