關於使用JS動態修改CSS樣式問題

【轉】關於使用js動態修改樣式問題 

有時我們需要動態生成效果，那麼就需要對頁面的css進行各種處理，進而達到一些樣式的改變。如動畫，拖放等效果。所以使用JS正確的來對頁面樣式修改是灰常重要的。

1.修改標籤的class屬性值

直接在css中定義多種css類型  然後在事件中對DOM對象的 class屬性進行切換，是最簡單可行的一種方式。也是目前使用最多的方法。

當然最簡單的就是使用  

<script type="text/javascript">
  var obj = document.getElementById("div");
  obj.className = "otherclass";
</script>

非標準ECMAScript來進行修改其class的值。

還有就是使用ES標準來進行修改，就是使用DOM的setAttribute方法。但是他有一個兼容性問題。

<script type="text/javascript">
  var obj = document.getElementById("div");
  obj.setAttribute("className","otherclass");//IE下使用className

  obj.setAttribute("class","otherclass");//FF下的方式
所以要注意

</script>

一個簡單的小問題，但也需要注意。

2.添加行內樣式進行覆蓋

直接使用 dom_obj.style.*** = "***"; 來進行對其樣式的覆蓋。由於行內樣式優先級最高，所以能覆蓋其他節點的樣式。

該方法也是極爲常用的，唯一需要注意的就是對於樣式名的大小寫問題。

如：border-left  應該爲 borderLeft 

使用該方法我們可能需要用到計算當前樣式值的方法。這裏也具有兼容性問題。

currentStyle只有IE支持。取得當前應用的樣式。

getComputedStyle支持FF，Opera，Safari，Chrome等瀏覽器。取得最終應用的樣式。

<script type="text/javascript">
    var obj = document.getElementById("div");
    objh=document.defaultView.getComputedStyle(obj,null).height;
    //或者
    objh=window.getComputedStyle(obj,null)[height];
    //IE下 需要
    objh=obj.currentStyle[height];
</script>

下面是一個解決兼容性方法

function getStyle(element,property) {
　　var value = element.style[camelize(property)];

　　if(!value) {
　　　　if(document.defaultView && document.defaultView.getComputedStyle) {
　　　　　　value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
　　　　} else if(element.currentStyle) {
　　　　　　value = element.currentStyle[camelize(property)];
　　 　　}
　　}

　　return value;
}

  其實 setAttribute方法 是有3個參數的。

  object . setAttribute ( sName , vValue , iFlags ) 

參數： 

 sName : 必選項。字符串(String)。指定屬性的名稱。 

 vValue : 必選項。要賦給屬性的值。可以是任何需要的變量類型。 

   iFlags : 可選項。整數值(Integer)。0 | 1

  0 : 當屬性被設置的時候，對象任何已有的同名屬性設置都會被覆蓋，而不會考慮它們的大小寫。 

  1 : 默認值。執行嚴格考慮字母大小寫的屬性設置。假如此方法的 iFlags 參數設置爲 1 ，則執行 iFlags 參數設置爲 0 的 getAttribute 方法時，滿足 sAttrName 指定的特性名稱不一定能被找到。

3.修改樣式表

獲取文檔樣式表的lists

document.styleSheets[0];//獲取第一個樣式表

W3C堅持使用cssRules[]，而微軟堅持rules[]。

document.styleSheets[0].cssRules[0];//W3C
獲取第一個樣式表的第一個樣式信息
document.styleSheets[0].rules[0];//IE  獲取第一個樣式表的第一個樣式信息

更多信息請查詢 document.styleSheets 的相關信息。

附：

W3C DOM2樣式規則

==========================================================

CSSStyleSheet對象

　 CSSStyleSheet對象表示的是所有CSS樣式表，包括外部樣式表和使用<style type="text/css"></style>標籤指定的嵌入式樣式表。

     CSSStyleSheet同樣構建於其他的DOM2 CSS對象基礎之 上，而CSSStyleRule對象表示的則樣式表中的每條規則。

　　通過document.stylesheets屬性可以取得文檔中CSSStyleSheet對象的列表，其中每個對象有下列屬性

　　type　　　　　　　　始終爲text/css

　　disabled　　　　　　相應樣式表是應於還是禁用於當前文檔

　   href　　　　　　　　樣式表相對於當前文檔的URL

　　title　　　　　　　　分組樣式標籤

　　media　　　　　　   樣式應用的目標設備類型(screen、print)

　　ownerRule　　　　   只讀CSSRule對象，若樣式用@import導入，表示其父規則

　　cssRules 　　　　　只讀cssRuleList列表對象，包含樣式表中所有CSSRule對象

　　==========================================================

　　insertRule(rule,index)　　　　添加新的樣式聲明

　　deleteRule(index)　　　　　 從樣式表中移除規則

CSSStyleRule對象

　　每個CSSStyleSheet對象內部包含着一組CSSStyleRule對象。這些對象分別對應着類似下面這樣一條規則：

　　boyd{

　  　　font:lucida,verdana,sans-serif;

　　　　background:#c7600f;

　　　　color:#1a3800;

　　}

CSSStyleRule對象具有下列屬性：

　　type　　　　　　　　繼承自CSSRule對象的一個屬性，以0~6中的一個數字表示規則類型

　　cssText　　　　　　 以字符串形式表示的當前狀態下的全部規則

　　parentStyleSheet　　 引用父CSSStyleRule對象

　　parentRule　　　　　 如果規則位於另一規則中，該屬性引用另一個CSSRule對象

　　selectorText　　　　   包含規則的選擇符

　　style　　　　　　　　與HTMLElement.style相似，是CSSStyleDeclaration對象的一個實例

 

CSSStyleDeclaration對象

　　表示一個元素的style屬性，與CSSStyleRule對象類似，CSSStyleDeclaration具有下面屬性：

　　cssText　　　　以字符串形式表示的全部規則

　　parentRule　　  將引用CSSStyleRule對象 

　　==========================================================

　　getPropertyValue(propertyName)　　　　　　CSS樣式屬性值

　　removeProperty(propertyName)　　　　　　  從聲明中移除屬性

　　setProperty(propertyName,value,priority)　　   設置CSS屬性值