动态修改css文件中,具体的class中的个别属性值。
function setStyleSheetObjCssClassProperty(pStyleSheetObj, pSelectorText, pProperty, pValue) { var pStyleSheet = pStyleSheetObj.sheet; setSpecificStyleSheetCssClassProperty(pStyleSheet, pSelectorText, pProperty, pValue); } //修改class的属性值 //javascript方式 function setSpecificStyleSheetCssClassProperty(pStyleSheet, pSelectorText, pProperty, pValue) { var rules = pStyleSheet.cssRules; var rule; var selectorText; for (i = 0; i < rules.length; i++) { rule = rules[i]; selectorText = rule.selectorText; if (selectorText == null || selectorText == "") { continue; } else if (selectorText === pSelectorText) { rule.style.setProperty(pProperty, pValue); return; } //else if (selectorText.indexOf(pSelectorText + ",") > 0) { // rule.style.setProperty(pProperty, pValue); //} } } //修改class的属性值 //javascript方式 function setCssClassProperty(pSelectorText, pProperty, pValue) { var pSheetObjs = document.styleSheets; for (j = 0; j < pSheetObjs.length; j++) { setSpecificStyleSheetCssClassProperty(pSheetObjs[j], pSelectorText, pProperty, pValue); } 使用例子如下: var sheetObj=$("#linkSource")[0]; setStyleSheetObjCssClassProperty(sheetObj,"pSelectorText","background","green"); setCssClassProperty("pSelectorText","background","green"); 修改后的效果的生命期:从修改开始直到CSS文件重新加载, 所以,如果有其他的特殊的使用的情况,相应的重新执行一次就好了。 //删除stylesheet中的某一个rule function deleteRule(sheet, ruleName) { for (i = 0; i < sheet.rules.length; i++) { var rule = sheet.rules[i]; if (rule.selectorText.toLowerCase() == ruleName.toLowerCase()) { if (sheet.deleteRule) { sheet.deleteRule(i); } if (sheet.removeRule) { sheet.removeRule(i); } } } } //stylesheet中的添加一个rule function addRule(sheet, ruleName) { if (sheet.addRule) { sheet.addRule(ruleName, null, 0); } if (sheet.insertRule) { sheet.insertRule(ruleName + ' { }', 0); } }
如果觉得文章对您有帮助,请不吝点个赞,表示一下支持!谢谢!