JS控制CSS

來源:互聯網
上載者:User
近排看了下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];     

}

}

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。