1. 程式人生 > >動態修改css 規則

動態修改css 規則

IT i++ insert spa keyframes IV 式表 find Oz

頁面引用了兩個樣式表:

<link href="css/mui.min.css" rel="stylesheet" />

<link href="css/menu.css" rel="stylesheet" />

//根據樣式引用順序索引獲取樣式表對象,此處獲取結果為menu.css樣式對象

var menuCss = document.styleSheets[1]; var rule; for(var i=0; i<menuCss.cssRules.length; i++){ rule = menuCss.cssRules[i]

if(rule.type == CSSRule.KEYFRAMES_RULE

|| rule.type == CSSRule.WEBKIT_KEYFRAMES_RULE
                         || rule.type == CSSRule.MOZ_KEYFRAMES_RULE ) //&& i==0
                     {
                         console.log(rule.cssText);
                         break;
                     }
                }

for(var item in rule){
console.log(item);
}
輸出樣式規則對象屬性
cssRules at new_touchMove.html:204
name at new_touchMove.html:204
parentRule at new_touchMove.html:204
parentStyleSheet at new_touchMove.html:204
cssText at new_touchMove.html:204
type at new_touchMove.html:204
insertRule at new_touchMove.html:204
deleteRule at new_touchMove.html:204
findRule at new_touchMove.html:204
UNKNOWN_RULE at new_touchMove.html:204
STYLE_RULE at new_touchMove.html:204
CHARSET_RULE at new_touchMove.html:204
IMPORT_RULE at new_touchMove.html:204
MEDIA_RULE at new_touchMove.html:204
FONT_FACE_RULE at new_touchMove.html:204
PAGE_RULE at new_touchMove.html:204
WEBKIT_KEYFRAMES_RULE at new_touchMove.html:204
WEBKIT_KEYFRAME_RULE at new_touchMove.html:204
SUPPORTS_RULE at new_touchMove.html:204
WEBKIT_FILTER_RULE at new_touchMove.html:204
HOST_RULE at new_touchMove.html:204

動態修改css 規則