JS動的修正CSSスタイルに関する質問(classとstyle)

ラベルのclassプロパティ値の変更
cssで複数のcssタイプを直接定義し、イベントでDOMオブジェクトのclassプロパティを切り替えるのは、最も簡単で実行可能な方法です.現在最も多く使われている方法でもあります.このメソッドは、オブジェクトの元のclassプロパティを上書きします. var obj = document.getElementById("div"); obj.className = "otherclass"; 非標準ECMAScriptは、classの値を変更します.
またES規格を用いて修正することは,DOMのsetAttribute手法を用いることである.しかし、彼には互換性の問題がある.

    
      var obj = document.getElementById("div");
      obj.setAttribute("className","otherclass");//IE   className
      obj.setAttribute("class","otherclass");//FF          
    

setAttribute()はidにも適用されます.
##行内スタイルを追加dom_を直接使用obj.style.*** = "***"; に表示されます.行のスタイルの優先度が最も高いため、他のノードのスタイルを上書きできます.この方法も非常によく使われていますが、唯一注意しなければならないのはスタイル名の大文字と小文字の問題です.例えば、border-leftはborderLeftであるべきです.
この方法を使用すると、現在のスタイル値を計算する方法が必要になる場合があります.ここでも互換性の問題があります.CurrentStyleはIEのみでサポートされています.現在のアプリケーションのサンプルgetComputedStyleを取得してFF,Opera,Safari,Chromeなどのブラウザをサポートします.最終適用スタイルを取得します.

    var obj = document.getElementById("div");

    objh=document.defaultView.getComputedStyle(obj,null).height;

    //  
    objh=window.getComputedStyle(obj,null)[height];

    //IE    
    objh=obj.currentStyle[height];

互換性の解決方法

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

classnameオブジェクトスタイルを設定すると、オブジェクトのclassプロパティが上書きされますが、他のクラスセレクタは上書きされません.現在の要素のclassのみが上書きされます.