DOM Level 2 CSS

6896 ワード

css dom cssRules

概要

DOM 2はスタイルモジュールを導入し,言語に依存しないAPI標準設計を提供した.これらのAPIでは、プログラムとスクリプトがドキュメントのスタイルに動的にアクセスし、変更できます.DOM 2このモジュールはDocument Object Model Level 2 CoreおよびDocument Object Model Level 2 Viewsに依存する.
モジュールには、このブログで共有されているコンテンツとDOM Level 2 Style Sheetsの2つのサブモジュールが含まれています.スタイルシートの抽象インタフェースが定義されています.

きほんインタフェース

CSSStyleDeclaration

CSSStyleDeclarationは、CSSスタイル宣言コードブロックを表します.CSSStyleDeclarationはクラス配列です.このクラス配列の各項目はCSS属性名(e.g.'background-color')である.この配列の値には、下付き文字でアクセスできます.

// Introduced in DOM Level 2:
interface CSSStyleDeclaration {
           attribute DOMString        cssText;
                                        // raises(DOMException) on setting

  DOMString          getPropertyValue(in DOMString propertyName);
  CSSValue           getPropertyCSSValue(in DOMString propertyName);
  DOMString          removeProperty(in DOMString propertyName);
  DOMString          getPropertyPriority(in DOMString propertyName);
  void               setProperty(in DOMString propertyName, 
                                 in DOMString value, 
                                 in DOMString priority);
  readonly attribute unsigned long    length;
  DOMString          item(in unsigned long index);
  readonly attribute CSSRule          parentRule;
};

サンプルコード:

var desc = document.defaultView.getComputedStyle( document.getElementById( 'navbar' ) );
//  273
console.log( desc.length );
//  "background-attachment"
console.log( desc[0] );
//      CSSPrimitiveValue    : {primitiveType: 25, cssValueType: 1, cssText: "rgb(0, 0, 0)", setFloatValue: function, getFloatValue: function…}
desc.getPropertyCSSValue( 'color' );
//  "rgb(0, 0, 0)"，      ？        cssText   
desc['color']

CSSStyleSheet

CSSStyleSheetインタフェースはDOM Level 2 Style Sheets定義のStyleSheetインタフェースを拡張した.
insertRule

unsigned long      insertRule(in DOMString rule, in unsigned long index)

スタイルシート・ルール・セットの指定された場所に新しいCSSルールを挿入し、新しく追加されたルールのインデックス番号を返します.

var sheets = document.styleSheets;
var s = sheets[0];
//       CSS  
console.log( s.cssRules );
//      DOM            CSS  
s.insertRule( '#t { color : red; }' )；
//       CSS  
console.log( s.cssRules );

deleteRule

void               deleteRule(in unsigned long index)

スタイルシート規則セットからCSS規則を除去する

var sheets = document.styleSheets;
var s = sheets[0];
//       CSS  
console.log( s.cssRules );
//      DOM            CSS  
s.deleteRule( 0 )；
//       CSS  
console.log( s.cssRules );

CSSRule

CSSRuleは、すべてのCSSルールオブジェクトの親です.この親は、いくつかのルール・タイプの列挙と、共通の読み取り専用属性を規定します.

interface CSSRule {
    readonly attribute unsigned short   type;
    readonly attribute DOMString        cssText;
    readonly attribute CSSStyleSheet    parentStyleSheet;
    readonly attribute CSSRule          parentRule;
}

RuleType

UNKNOWN_RULE                   = 0
STYLE_RULE                     = 1
CHARSET_RULE                   = 2
IMPORT_RULE                    = 3
MEDIA_RULE                     = 4
FONT_FACE_RULE                 = 5
PAGE_RULE                      = 6

cssText
CSSルールのテキスト表示.

var sheets = document.styleSheets;
var s = sheets[0];
//    CSS   cssText
//  example : h4 { text-align: left; font-family: sans-serif; font-weight: normal; color: rgb(0, 80, 178); }
console.log( s.cssRules[0].cssText );

parentStyleSheet
CSSルールを含むスタイルシートオブジェクトを指します.

var sheets = document.styleSheets;
var s = sheets[0];
//  true
console.log( s.cssRules[0].parentStyleSheet == s );

parentRule
CSSルールが@mediaブロックで定義されたルールなどの埋め込みルールである場合、parentRuleはこのルールを埋め込むCSSルールを指します.

var sheets = document.styleSheets;
//  s URL  http://www.w3.org/StyleSheets/TR/W3C-REC.css
var s = sheets[1];
//  @media
var mediaRule = s.cssRules[6];
var subRule = mediaRule.cssRules[0];
//  true
console.log( subRule.parentRule == mediaRule );

CSSStyleRule

interface CSSStyleRule : CSSRule {
    attribute DOMString        selectorText;
    readonly attribute CSSStyleDeclaration  style;
};

selectorText
CSSセレクタ.

var sheets = document.styleSheets;
//  s URL  http://www.w3.org/StyleSheets/TR/W3C-REC.css
var s = sheets[1];
//  @media
var mediaRule = s.cssRules[6];
var subRule = mediaRule.cssRules[0];
//  "a img"
console.log( subRule.selectorText );

style
読み取り専用プロパティ.このプロパティはCSSStyleDeclarationオブジェクトのインスタンスです.

var sheets = document.styleSheets;
//  s URL  http://www.w3.org/StyleSheets/TR/W3C-REC.css
var s = sheets[1];
//  @media
var mediaRule = s.cssRules[6];
var subRule = mediaRule.cssRules[0];
//  1
console.log( subRule.style.length );
//  "inherit"
console.log( subRule.style.color );
//  "inherit"
console.log( subRule.style['color'] );

Elementインラインスタイル

インラインスタイルは何も言うことはありませんが、簡単に言えばHTMLラベルで指定したスタイル構成です.

var navbar = document.getElementById( 'navbar' );
//  CSSStyleDeclaration    
console.log( navbar.style );

CSSスタイル最終適用結果値

W 3 C規格では、次のように定義されたViewCSSというインタフェースが定義されています.

//  var style = document.defaultView.getComputedStyle("  ", "  ");
//  e.g. var style = document.defaultView.getComputedStyle( document.getElementById("test") , ":after");
interface ViewCSS : views::AbstractView {
    CSSStyleDeclaration getComputedStyle(in Element elt,in DOMString pseudoElt);
};

dom elementオブジェクトのstyleプロパティとは異なり、このgetComputedStyleメソッドは、最終的に要素に適用されるすべてのCSSプロパティオブジェクトを読み込むだけで、要素オブジェクトのスタイルを設定することはできません.styleプロパティは読み書き可能です.

var desc = document.defaultView.getComputedStyle( document.getElementById( 'navbar' ) );
//  273
console.log( desc.length );
//  "background-attachment"
console.log( desc[0] );
//      CSSPrimitiveValue    : {primitiveType: 25, cssValueType: 1, cssText: "rgb(0, 0, 0)", setFloatValue: function, getFloatValue: function…}
desc.getPropertyCSSValue( 'color' );
//  "rgb(0, 0, 0)"，      ？        cssText   
desc['color']

ul,liのCSS

純粋なCSSは3 D回転のキューブをします