addrules 创建css

来源：互联网发布：java服务器高并发编辑：程序博客网时间：2024/06/05 06:07

js代码

/** * Add a stylesheet rule to the document (may be better practice, however, * to dynamically change classes, so style information can be kept in * genuine styesheets (and avoid adding extra elements to the DOM)) * Note that an array is needed for declarations and rules since ECMAScript does * not afford a predictable object iteration order and since CSS is * order-dependent (i.e., it is cascading); those without need of * cascading rules could build a more accessor-friendly object-based API. * @param {Array} decls Accepts an array of JSON-encoded declarations * @example addStylesheetRules( [selector, [attr, value], …], [selector, [attr, value], …] ); */ addStylesheetRules([ ['h2', // Also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myClass', ['background-color', 'yellow'] ] ]); //addStylesheetRules(["div .content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]]); function addStylesheetRules (decls) { var style = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(style); if (!window.createPopup) { /* For Safari */ style.appendChild(document.createTextNode('')); } var s = document.styleSheets[document.styleSheets.length - 1]; for (var i=0, dl = decls.length; i < dl; i++) { var j = 1, decl = decls[i], selector = decl[0], rulesStr = ''; if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') { decl = decl[1]; j = 0; } for (var rl=decl.length; j < rl; j++) { var rule = decl[j]; rulesStr += rule[0] + ':' + rule[1] + (rule[2] ? ' !important' : '') + ';\n'; } if (s.insertRule) { s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length); } else { /* IE */ s.addRule(selector, rulesStr, -1); } } }

js代码2

window.onload=function(){  var token,style,sheet,rule,test;    style=document.createElement("style");   document.head.appendChild(style);  sheet=style.sheet;    var token=window.WebKitCSSKeyframesRule?"-webkit-":"";  sheet.insertRule("@"+token+"keyframes test {}",0);  test=sheet.cssRules[0];   for(var i=0;i<=100;i++){        var θ=Math.PI*2*i/100,        r=Math.sin(5*θ)*100,        x=Math.sin(θ)*r|0,        y=Math.cos(θ)*r|0;       (test.insertRule||test.appendRule).call(test,i+"% {}");       test.cssRules[i].style.transform=    test.cssRules[i].style.WebkitTransform=      "translateX("+x+"px) translateY("+y+"px)";  };    for(var l=50,i=0;i<l;i++)setTimeout(function(){       var div=document.createElement("div");    document.body.appendChild(div);    div.style.width="20px";    div.style.height="20px"    div.style.position="absolute";    div.style.top="120px";    div.style.left="120px";    div.style.background="#000";    div.style.opacity=(1-this/l)*0.3;     div.style.borderRadius="10px";        div.stywindow.onload=function(){  var token,style,sheet,rule,test;    style=document.createElement("style");   document.head.appendChild(style);  sheet=style.sheet;    var token=window.WebKitCSSKeyframesRule?"-webkit-":"";  sheet.insertRule("@"+token+"keyframes test {}",0);  test=sheet.cssRules[0];   for(var i=0;i<=100;i++){        var θ=Math.PI*2*i/100,        r=Math.sin(5*θ)*100,        x=Math.sin(θ)*r|0,        y=Math.cos(θ)*r|0;       (test.insertRule||test.appendRule).call(test,i+"% {}");       test.cssRules[i].style.transform=    test.cssRules[i].style.WebkitTransform=      "translateX("+x+"px) translateY("+y+"px)";  };    for(var l=50,i=0;i<l;i++)setTimeout(function(){       var div=document.createElement("div");    document.body.appendChild(div);    div.style.width="20px";    div.style.height="20px"    div.style.position="absolute";    div.style.top="120px";    div.style.left="120px";    div.style.background="#000";    div.style.opacity=(1-this/l)*0.3;     div.style.borderRadius="10px";        div.style.animation=    div.style.WebkitAnimation=      "test 10s linear infinite";  }.bind(i),i*20);}*/le.animation=    div.style.WebkitAnimation=      "test 10s linear infinite";  }.bind(i),i*20);}

html

<html><head><meta charset="utf-8"> </head><body><script type="text/javascript" src="addrules.js"></script><h2>2334</h2></body></html>

0 0