css级联样式单的功能,javascipt修改css级联样式表类和伪类样式

javascript修改级联样式表文件或者内嵌级联样式表中定义的类样式属性。需要注意的是级联样式中的伪类直接替换属性值无效，需要新增样式进行覆盖，替换值不起作用

javascipt修改css级联样式表类和伪类样式

.exampleA{color:Blue}

.exampleA:before {content:"-";color:red;font-size:20px;font-weight:bold}

function changecss(theClass, element, value) {

var sl = document.styleSheets.length;

if (sl == 0) return;

var isPseudo = theClass.indexOf(':') != -1;//css伪类

//非IE8-，js获取到伪类名称包含二个冒号

if (window.IE8) theClass = theClass.replace(/:+/g, ':');

else theClass = theClass.replace(/:+/g, '::');

var cssRules = document.styleSheets[0].rules ? 'rules' : 'cssRules';

for (var i = 0; i < sl; i++) {

for (var j = 0, rl = document.styleSheets[i][cssRules].length; j < rl; j++) {

if (document.styleSheets[i][cssRules][j].selectorText == theClass) {

if (isPseudo) //css伪类需要覆盖，替换值没用

document.styleSheets[i].addRule ?

document.styleSheets[i].addRule(theClass, element + ':' + value) ://IE8+，chrome

document.styleSheets[i].insertRule(theClass + '{' + element + ':' + value + '}', rl);//firefox

else document.styleSheets[i][cssRules][j].style[element] = value;

break;

}

}

}

}

Example A

Example B

Example A

加支付宝好友偷能量挖...

2013-6-24Web开发网