动态修改css 规则

最新推荐文章于 2023-10-21 20:26:55 发布

weixin_30663391

最新推荐文章于 2023-10-21 20:26:55 发布

阅读量111

点赞数

原文链接：http://www.cnblogs.com/wgx0428/p/9199323.html

版权

页面引用了两个样式表：

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

//获取样式表对象
function getStyleSheet(){
    
    //获取样式表对象，此处为new_menu.css样式文件
    var styleSheets = document.styleSheets;
    
    for(var i=0; i<styleSheets.length;i++){
        
        var sheet=styleSheets[i];//console.log(sheet.href);
        
        if(sheet.href==undefined || sheet.href==null){
            continue;
        }
        
        if(sheet.href.indexOf('new_menu')>0){
            
            styleSheet=sheet;//console.log(i);
            break;
        }
    }
    //console.log(styleSheet);
}

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规则
function createRule(menuCss,i,x,y,offsetX,offsetY,cssIndex){
    
    var offset_x=x-offsetX;
    var offset_y=y-offsetY;
    
    var btn ='.btn'+i;
    var btnCss='left: '+offset_x+'px; top: '+offset_y+'px; animation: btn'+i+' 300ms;-webkit-animation: btn'+i+' 300ms;-moz-animation: btn'+i+' 300ms;-o-animation: btn'+i+' 300ms;';
    menuCss.insertRule(btn+'{'+btnCss+'}',cssIndex);
    
    var webkitKeyframes ='@-webkit-keyframes btn'+i;
    var webkitKeyframesCss='0%{ left: '+x+'px; top: '+y+'px; } 100%{ left: '+offset_x+'px; top: '+offset_y+'px;}';
    menuCss.insertRule(webkitKeyframes+'{'+webkitKeyframesCss+'}',cssIndex+1);
    
    var keyFrames ='@keyframes btn'+i;
    var keyFramesCss='0%{ left: '+x+'px; top: '+y+'px; } 100%{ left: '+offset_x+'px; top: '+offset_y+'px;}';
    menuCss.insertRule(keyFrames+'{'+keyFramesCss+'}',cssIndex+2);
    
    var mozKeyframes ='@-moz-keyframes btn'+i;
    var mozKeyframesCss='0%{ left: '+x+'px; top: '+y+'px; } 100%{ left: '+offset_x+'px; top: '+offset_y+'px;}';
    menuCss.insertRule(mozKeyframes+'{'+mozKeyframesCss+'}',cssIndex+3);
}

//删除css规则
function delRules(styleSheet){
    
    for(var i=21; i<styleSheet.cssRules.length; i++){
         var rule = styleSheet.cssRules[i];
         
         //rule.type == CSSRule.KEYFRAMES_RULE || rule.type == CSSRule.WEBKIT_KEYFRAMES_RULE || rule.type == CSSRule.MOZ_KEYFRAMES_RULE
         if(rule.type == 1 || rule.type == 7){ 
             //根据规则索引删除规则
             styleSheet.deleteRule(i);
         }
    }
}