addrules 创建css


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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
postcss-pxtorem是一个PostCSS插件,用于将素单位(px)转换为rem单位,以实现移动端适配。它可以帮助开发者根据设计稿的尺寸自动将像素单位转换为rem单位,并且可以根据不同的屏幕尺寸进行适配。 使用postcss-pxtorem适配平板的步骤如下: 1. 首先,安装postcss-pxtorem插件。可以使用npm或者yarn进行安装: ``` npm install postcss-pxtorem --save-dev ``` 或者 ``` yarn add postcss-pxtorem --dev ``` 2. 在项目的根目录下创建一个postcss.config.js文件,并配置postcss-pxtorem插件。示例配置如下: ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 设计稿宽度除以10,例如设计稿宽度为375px,则rootValue为37.5 propList: ['*'], // 需要转换的属性,这里设置为全部 selectorBlackList: [], // 需要忽略的选择器,可以使用正则表达式 }, }, }; ``` 3. 在项目的构建工具中配置使用postcss-pxtorem插件。具体配置方式根据不同的构建工具而定,例如在webpack中的配置如下: ```javascript module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { config: 'postcss.config.js', }, }, }, ], }, ], }, // ... }; ``` 4. 在项目中使用rem单位进行样式编写。postcss-pxtorem插件会自动将像素单位转换为rem单位,根据不同的屏幕尺寸进行适配。 这样,使用postcss-pxtorem插件后,可以方便地进行平板适配,使得页面在不同的屏幕尺寸下显示一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值