javascript 操作 css Rule
//add addCssRule('.bcd',{'color':'red','font-weight':'bold','font-size':'12px'},document.styleSheets[1]);
function addCssRule(selector,styles,styleSheet,index){
var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet],
style = '',
declaration = '';
for(var pro in styles){
if(styles.hasOwnProperty(pro)){
declaration += (pro + ':' + styles[pro] + ';');
}
}
style = selector + '{' + declaration + '}';
for(var i = 0,j = sheets.length; i < j;i++){
if(sheets[i].insertRule){
index = index >= 0 ? index : sheets[i]['cssRules'].length;
sheets[i].insertRule(style,index);
}else if(sheets[i].addRule){ //IE
index = index >= 0 ? index : -1; //-1为末尾
sheets[i].addRule(selector,declaration,index);
}
}
}
//modify editCssRule('.abc',{'font-weight':'bold','font-size':'14px'},document.styleSheets[1]);
function editCssRule(selector,styles,styleSheet){
var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet];
selector = selector.toUpperCase(); // ie9以下标签选择器默认是大写 这里统一下
//对大小写敏感的selector 会有问题
for(var i = 0,j = sheets.length; i < j;i++){
var rules = sheets[i]['cssRules'] || sheets[i]['rules']; //ie为 rules
if(!rules){ continue;}
for(var m = 0,n = rules.length;m < n;m++){
if(rules[m]['selectorText'].toUpperCase() == selector){
for(var pro in styles){
if(styles.hasOwnProperty(pro)){
rules[m].style[cssCamilize(pro)] = styles[pro];
}
}
}
}
}
}
//del delCssRule('.bcd',document.styleSheets[1]);
function delCssRule(selector,styleSheet,index){
var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet];
selector = selector.toUpperCase();
for(var i = 0,j = sheets.length; i < j;i++){
var rules = sheets[i]['cssRules'] || sheets[i]['rules']; //ie为 rules
if(index >=0 && index < rules.length){
sheets[i].deleteRule ? sheets[i].deleteRule(index) : sheets[i].removeRule(index);
}else if(selector){
for(var m = 0,n = rules.length;m < n;m++){
if(rules[m]['selectorText'].toUpperCase() == selector){
sheets[i].deleteRule ? sheets[i].deleteRule(m) : sheets[i].removeRule(m);; //可能存在多个一样的selector 全部删除
}
}
}else{
return false;
}
}
};
function cssCamilize(str){
return str.replace(/-(\w)/g,function($1,$2){
return $2.toUpperCase();
});
};
//参考:http://www.cnblogs.com/2050/p/4029656.html
function addCSS(cssText){
var style = document.createElement('style'), //创建一个style元素
head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
if(style.styleSheet){ //IE
var func = function(){
try{ //防止IE中stylesheet数量超过限制而发生错误
style.styleSheet.cssText = cssText;
}catch(e){ }
}
//如果当前styleSheet还不能用,则放到异步中则行
if(style.styleSheet.disabled){
setTimeout(func,10);
}else{
func();
}
}else{ //w3c
//w3c浏览器中只要创建文本节点插入到style元素中就行了
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
head.appendChild(style); //把创建的style元素插入到head中
}
javascript 操作 css Rule的更多相关文章
- [javascript][翻译]使用javascript添加css rule
来杭一周,收获很多,成长很多. 周六在搞一个插件的时候碰到需要动态添加伪元素的需求,搜了一下解决方案,有人用正则写出了读取伪元素的函数:我觉得倒是可以通过注入css rule的方式,来让预留有某些类的 ...
- 使用javascript和css模拟帧动画的几种方法浅析
我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...
- 通过JS操作CSS
动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Javascript动态操作CSS总结
一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left ...
- javascript操作html元素CSS属性
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...
- 使用 JS 来动态操作 css ,你知道几种方法?
JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...
- 5种JavaScript和CSS交互的方法
分享 分享 分享 分享 分享 随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...
- 5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
随机推荐
- 《python基础教程》笔记之 列表
list函数 list函数将其他类型的序列转换为列表,如 >>> list("hello world")['h', 'e', 'l', 'l', 'o', ' ' ...
- Windows坐标系
.逻辑坐标 逻辑坐标是独立于设备的,它与设备点的大小无关.使用逻辑单位,是实现"所见即所得"的基础.当程序员在调用一个画线的GDI函数LineTo,画出25.4mm(1英寸) 长的 ...
- Docker容器环境下ASP.NET Core Web API
Docker容器环境下ASP.NET Core Web API应用程序的调试 本文主要介绍通过Visual Studio 2015 Tools for Docker – Preview插件,在Dock ...
- RMAN-06023: no backup or copy of datafile 6 found to restore
一:问题描述 我用指定备份集恢复时,报错: RMAN> run { 2> shutdown immediate; 3> startup mount; 4> allocate c ...
- Local System/Network Service/Local Service
// The name of the account under which the service should run// 1 NT AUTHORITY\\SYSTEM 2 NT AUTHORIT ...
- android 通过post方式提交数据的最简便有效的方法
public boolean post(String username, String password) throws Exception { username = URLEncoder.encod ...
- Codeforces Round #299 (Div. 1)C. Tavas and Pashmaks (凸壳)
C. Tavas and Pashmaks Tavas is a cheerleader in the new sports competition named "Pashmaks&qu ...
- C#系列教程——switch定义及使用
代码如下: using System; class Switch_Test { static void Main() { Console.WriteLine("box sizes: 1=Sm ...
- 关于ThinkPHP控制器的方法失效的问题
今天发现控制器的方法失效了,用了排除法,找了长时间的原因,都没有找出来,后来干脆把home模块中的控制器和视图文件都复制到bbs模块下,竟然也不行. 这说明了控制器和视图没有问题,一定是模块的配置有问 ...
- JS(五)
感觉JS里面还是有很多小技巧的,知道套路了,其实实现起来其实也还没有想象中的那么复杂.不过我觉得还是要把所学的知识融会贯通吧,不能学了JS就忘了前面的知识,结合起来才会威力无穷. 1.跑马灯:弹弹弹 ...