詳細-jsでCSSを操作する方法

詳細–jsでCSSを操作する方法

前言

本明細書で説明する重要な知識点

CSSStyleSheetオブジェクト、StyleSheetインタフェースに継承->トランスポートゲート

CSSRuleListオブジェクト->トランスポートゲート

CSSStyleRuleオブジェクト、CSSRuleインタフェースに継承->トランスポートゲート

CSSStyleDeclarationオブジェクト->トランスポートゲート

注:これらの知識点を知りませんか.大丈夫です.私はあなたたちに転送ドアを提供しました.)この中にはDOM2 の操作がたくさんあるので、以下のコードを使ってブラウザのサポート状況を検出することができます.

    function isSuportDOM2(){
        return document.implementation.hasFeature('CSS','2.0') && 
                document.implementation.hasFeature('CSS2','2.0');
    }

!!!以下の时普通の知识の点、すでに経験の学友は省略することができます

CSS(積層スタイルシート)の参照方式

外部様式表、そして非難されて久しい@import url(...)

埋め込みスタイルシート

行内様式

嗑爱深究的童鞋:link何@import的区别

本当の本文！！

First、基本的な認識は

CSSStyleSheet > CSSRuleList > CSSStyleRule > CSSDeclaration

CSSStyleSheetオブジェクト

スタイルシートオブジェクト、たとえばで導入された外部スタイルシート
取得方法は次のとおりです.

    // first，  document.styleSheets,         StyleSheetList，        CSSStyleSheet，   StyleSheet  
    var styleList = document.styleSheets;
    //   link   sheet/styleSheet(  IE~orz)，  CSSStyleSheet  
    var link = document.querySelector('link');
    var stylesheet = link.sheet || styleSheet;

CSSStyleSheet共通属性

disabledは、スタイルシートが無効かどうかを設定し、その属性のみが書き込み可能であり、残りはhrefのみ読み取り可能であり、スタイルシートのパス情報media、マルチメディア属性は、MediaListオブジェクトcssRules‖rules(またはIE~orz)に戻り、CSSRuleListオブジェクトに戻る

CSSStyleSheetメソッド

deleteRule(index)‖removeRule(index)(IE,ひざまずいて)insertRule(rule,index)‖addRule(selector,cssText,index)(IE...)
栗!!!

    // IE
    var sheet = document.styleSheets[0];
    sheet.addRule('body','font-size:12px',0);
    //  IE
    sheet.insertRule('body{font-size:12px;}',0);

CSSRuleListオブジェクト

スタイル規則のリスト(例:selector1{...}、selector2{...}...selectorN{...})
取得方法

    //    CSSStyleSheet  ，    cssRules/rules    
    var rulelist = document.styleSheets[0].cssRules || 
        document.styleSheets[0].rules;

CSSRuleListの属性と方法

length、スタイル・ルール・リストの数を返します.

CSSStyleRuleオブジェクト(CSSRuleインタフェースに継承)

スタイル規則(1つ)、例:selector{...}取得方法

    var rulelist = document.styleSheets[0].cssRules || 
        document.styleSheets[0].rules;
    // CSSStyleRule  
    var rule = ruleList[0];

CSSStyleRuleのプロパティ

cssText、スタイルルールのテキストselectorTextを返し、スタイルルールのセレクタstyleを返し、CSSStyleDeclarationオブジェクトparentStyleSheetを返し、スタイルルールが存在するスタイルシートオブジェクト-CSSStyleSheetを返します.
栗を挙げます.

    style.css
        --body{
            font-size:12px;
            ...
        }
        a{
            text-decoration:none;
            ...
        }

    /*     ：
          ：     `body{...}`
            cssText->"body{font-size:12px...}"
            selectorText->"body"
            parentStyleSheet->"style.css"     
    */

CSSStyleDeclarationオブジェクト(最も一般的な操作)

取得方法

行内スタイル

    var cd = element.style

非行内スタイル

について

    // IE
    var currentStyle = element.currentStyle;
    //  IE
    var computedStyle = getComputedStyle(element,false);

CSSStyleRuleオブジェクト

から

    var rulelist = document.styleSheets[0].cssRules || 
        document.styleSheets[0].rules;
    // CSSStyleRule  
    var rule = ruleList[0];
    // CSSStyleDeclaration  
    var cd = rule.style;

CSSStyleDeclarationのプロパティ

cssText、スタイルルールテキストlengthを返し、宣言スタイルの数parentRuleを返し、その宣言ルールに対応するCSSStyleRuleオブジェクトを返します.
!!!注:CSSStyleDeclarationオブジェクトのcssTextは、CSSSstyleRuleオブジェクトのcssTextと区別されます.>コードは次のとおりです.

    /*
          ：body{font-size:12px}
            CSSStyleRule cssText-->"body{font-size:12px}"
            CSSStyleDeclaration cssText-->"font-size:12px"
    */

CSSStyleDeclarationの方法

item(index)、戻りスタイルのkey値getPropertyCSSValue(key)、たとえばgetPropertyCSSValue('font-size') getPropertyValue(key)ですが、この方法ではより広範なremoveProperty(key)を使用して、あるCSSスタイルを削除します.たとえば、removeProperty('font-size') getPropertyPriority(key)、スタイルが!importantに設定されている場合は「import」を返し、逆に「setProperty(key,value,import)」を返し、スタイルを設定します.
##参考文献
JAvascriptプレミアムプログラミング(第3版)——[美]Nicolas C.Zakas著李松峰曹力訳HTML 5権威ガイド——[美]Adam Freeman著謝廷晟牛化成劉美英訳
もっとオリジナルの文章はブロガーの個人独立ブログ--zifengBlogに注目してください