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.οnlοad=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.οnlοad=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>