詳解Javascript動態操作CSS_javascript技巧

一、使用js操作css屬性的寫法

1、對於沒有中劃線的css屬性一般直接使用style.屬性名稱即可。

如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position

2、對於含有中劃線的css屬性，將每個中劃線去掉並將每個中劃線後的第一個字元換成大寫即可。

如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等

3、js操作css float屬性的特殊寫法

因為 float 是javascript的保留字，我們不能直接使用obj.style.float來使用，這樣操作是無效的。其正確的使用方法是為：IE:obj.style.styleFloat，其他瀏覽器Mozilla(gecko)，ff等用 styleFloat:obj.style.cssFloat。

二、使用js擷取css屬性值

1、擷取行內Style：obj.style. 屬性名稱。<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS擷取CSS屬性值</div> 不能訪問class。

2、擷取Class內及Link外部的Css屬性：IE中使用的是obj.currentStyle[“屬性名稱”]方法，而FF是用的是getComputedStyle 方法

三、使用js給css屬性賦值

1、賦值class屬性

賦值：document.getElementById('ceil').className = "class1";

如它有多個值：document.getElementById('ceil').className = "class1 class2 class3";

2、obj.style.cssText設定一個對象的css樣式

document.getElementById('navition').style.cssText = "您的CSS代碼';

總結

知道如何動態修改頁面上所應用的樣式，對建立時髦而又富於互動的 Web 頁面來說是極其有用的——本文中所闡述的知識構成了諸如 JavaScript 動畫之類更進階的技術的基礎。需要注意的是，你應當負責任地使用動態樣式修改，而且不要過度濫用。如前面所述，樣式修改還能提高Web效率——內容的顯示和隱藏可以有助於避免在用戶端和伺服器之間不必要的資料互動。