DOM-5ダイナミック修正スタイルと積層スタイルシート

W 3 C DOM 2仕様
CSSStyleSheetオブジェクト
外部linkと埋め込みstyleを含むすべてのcssスタイルシートを表す.文書内のCSSStyleSheetオブジェクトのリストは、document.styleSheetsプロパティによって取得できます.各CSSStyleSheetには、次の属性があります.

type:値は常にtext/cssである.

disabled:対応するスタイルシートが現在のドキュメント(false)に適用されるか無効にされるかを示すブール値.

href:スタイルシートパス、埋め込まれているのはnullです.

media:スタイルシートアプリケーションを表すターゲットデバイス、
のmedia属性

cssRules:スタイルシート内のすべてのCSSRuleオブジェクトを含む、読み取り専用のCSSRuleListリストオブジェクトです.

insertRule(rule,index):新しいスタイル宣言を追加します.indexはリストオブジェクトcssRulesの値を表します.

deleteRule(index)は、スタイルシートからルールを削除するために使用されます.

CSSStyleRuleオブジェクト
各CSSStyleSheetオブジェクトの内部には、次の属性を持つCSSStyleRuleオブジェクトのセットdocument.styleSheets[0].cssRuleが含まれています.

typeは、CSSRuleオブジェクトから継承された属性であり、CSSStyleRuleタイプでは1である.

cssText:支払いのみで表される現在の状態におけるすべてのルールを含む.これらの規則が他のDOMメソッドによって変更されると、この文字列もそれに応じて変更されます.

parentStyleSheet:親CSSStyleSheetオブジェクトを参照します.

parentRule:ルールが別のルールにある場合、そのプロパティは別のCSSRuleオブジェクトを参照します.

selectorText:ルールを含むセレクタ;

CSSStyleDeclarationオブジェクト
これは、1つの要素のstyleプロパティ(要素に埋め込まれた値)document.styleSheets[0].cssRule[0]を表す最も多くのオブジェクトです.

cssText:文字列で表されるすべての規則を含む.

parentRule:CSSStyleRuleオブジェクトを参照します.

getPropertyValue(propertyName)は、文字列形式のCSSスタイル属性値を返します.

removeProperty(propertyName)は、宣言から特定の属性を削除します.

setProperty(propertyName,value,priotity)は、特定のcss属性の値を設定するために使用されます.

DOMスクリプトの外側にスタイルを配置
スタイル属性
注意このプロパティは、要素のstyleプロパティで埋め込みで宣言されたcssプロパティにのみアクセスできます.積層スタイルシートや親から継承されたプロパティにはアクセスできません.

element.style.setProperty('background-color','red');//ie 8以下で無効な

element.style.backgroundColor = 'red';//いずれも有効

styleはHTML Elementオブジェクトのstyle属性を参照し、それ自体はCSSStyleDeclarationオブジェクトである.一般的には第1種と第2種を互換化する
classNameベースのスタイルの切り替え

element.setAttribute('class','newClassName');//ie 8以下で無効な

element.className = 'newClassName';//いずれも有効

classNameはHTML Elementオブジェクトのclass属性を参照しています.互換性は一般的に2つ目の方法で考えられます.
スタイルシートの切り替え

代替スタイルシート

を使用
共通プロパティ

* type
* href
* media
* rel,              
  *   'stylesheet'               
  *   'alternate stylesheet'          ；             disbaled   true；
* disabled,           
* title,   ，       ；

js操作disabled値によるスタイル変更

body要素のclassName

を切り替えます.
共通のスタイルを設定後、bodyをそれぞれ設定.a;body.b等及び以下の要素様式;最後にbodyのclassnameを変えることでスタイルを変える

スタイルシート

の動的読み込みと削除
直接jsでスタイルシートを削除
cssルールの変更

document.styleSheetsはすべての埋め込みと外鎖のスタイルシートを得ることができ、hrefによって

を判断することができる.
計算スタイルへのアクセス
DOM 2スタイル仕様はdocument.defaultViewにはgetComputedStyle()メソッドが含まれています.読み取り専用CSSStyleDeclarationオブジェクトを返します

var elemet = A.$('example');
var styles = document.defaultVIew.getComputedStyle(element);
var color = styles.getProperty('background-color');

単純なグラデーション効果

function fadeColor(from ,to ,callback , duration, framesPerSecond) {
    function doTimeout(color, frame) {
      setTimeout(function() {
        try{
          callback(color);
        } catch(e) {
          A.log.write(e);
        }
      }, (duration * 1000 / framesPerSecond) * frame );
    }
    var duration = duration || 1;
    var framesPerSecond = framesPerSecond || duration * 15;
    var r, g ,b;
    var frame = 1;
    doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0);

    while(frame < framesPerSecond + 1) {
      r = Math.ceil(from.r * ((framesPerSecond - frame) / framesPerSecond) + to.r * (frame / framesPerSecond));
      g = Math.ceil(from.g * (framesPerSecond - frame) / framesPerSecond + to.g * (frame / framesPerSecond));
      b = Math.ceil(from.b * ((framesPerSecond - frame) / framesPerSecond) + to.b * (frame / framesPerSecond));
      doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame);
      frame++;
    }
  }
fadeColor({r:0, g:255, b:0}/*    */, {r: 255, g:255, b:255}/*    */, function(color) {
  A.setStyleById('style', {'background-color': color})
});