动态修改css文件中,具体的class中的个别属性值。

//修改class的属性值
//javascript方式
function setCssClassProperty(pSheetObj,pClassName,pProperty,pValue) {
    var rules = pSheetObj.sheet.cssRules;
    var rule;
    var selectorText;
    for (i = 0; i < rules.length; i++) {
        rule = rules[i];
        selectorText = rule.selectorText;
        if (selectorText === "." + pClassName) {
            rule.style.setProperty(pProperty,pValue);
        }
    }
}

使用例子如下:

var sheetObj=$("#linkSource")[0];
setCssClassProperty(sheetObj,"className","background","green");
修改后的效果的生命期:从修改开始直到CSS文件重新加载, 所以,如果有其他的特殊的使用的情况,相应的重新执行一次就好了。

PS:如果要删除class中的某个属性,也是差不多的,value为空就是了!
  setCssClassProperty(sheetObj,"className","background","");
				
时间: 2024-08-01 22:45:21

动态修改css文件中,具体的class中的个别属性值。的相关文章

js 动态修改css文件

_.find(document.styleSheets[4].cssRules,function(cssRule){ if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){ cssRule.style.position=""; cssRule.style.top = "0px"; } if(cssRule.selec

Android 使用Log4j把日志写入SD卡,动态修改输出文件名称

一.Log4j简单使用 1. 下载log4j.jar http://logging.apache.org/log4j/2.x/ 2. 创建Java代码 public class Loggers { public static Logger logger = Logger. getLogger(Loggers. class); public static void init() { try { PatternLayout patternLayout = new PatternLayout(); p

maven 根据P参数值打包动态修改properties文件中值或一定properties

由于本人 最近忙着公司事情,昨天没有写博客,今天就继续写吧 需求:由于最近开发clover项目 ,没有使用spring,更没有使用任何框架,而使用J2EE的web工程,所以连接ZK和MongoDB.Redis等服务器需用指定properties文件, 而目前公司又分各套环境(dev.test.product),所以希望打包的时候 根据profile id 来动态使用不同环境properties文件 或者动态修改properties参数值 方法一:使用一套properties配置文件,但具体参数使

Intellij Idea修改css文件即时更新生成效果

用来Idea也有一段时间了,觉得还是有很多地方没有用到,今天遇到了一个问题,百度了解决方法,正好在这里做一个小记录 主要问题是我在idea的项目里面修改了css文件,然后运行web文件,发现并没有做到及时更新修改,如图所示,我将cursor(鼠标图标)改为wait(等待图标),原为pointer(小手图标),运行之后并没有及时的更新 上网百度了一下方法 在IDE中进入"文件(File)→设置(Settings)→插件(Plugins)"中查找LiveEdit.如果你用的IDE版本没有内

js 获取手机浏览器类型,修改css文件的class的值

/*========================================= 函数功能:获取浏览器类型 =========================================*/ function getBrowser() { var type = "pc" var ua = navigator.userAgent.toLowerCase(); /* Navigator 是HTML DOM中的内置对象,它包含有关浏览器的信息.userAgent是Navigator

js 修改css文件

在做自動换肤设置时,无意中看到了js修改css的方法,感觉挺有用的,特来学习分享一下.好了,下面开始学习: js的 document.styleSheets 获取到的是引入的css的对象数组.如: 其中  CSSStyleSheet展开如下: document.styleSheets[0] 即可得到你所应用的第一个css rules 和 cssRules 的计数方法是不一样的!rules 是第几个选择器:cssRules 是第几条规则 document.styleSheets[0].cssRul

javascript 动态修改css样式

方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2"; //或者 obj.setAttribute("class", "style2"); 方法三:使用obj.style.cssTest,语法: obj.style.cssText = " display:block; color:White;" 这个方法优点: 可以这样添加好几个属性.

小程序开发之改变data中数组或对象的某一属性值

前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: <scroll-view class='hd-cont' scroll-x="true" style='width: 100%'> <view wx:for="{{sDate}}" wx:key="{{index}}" class='date-con

关于在jquery动态修改css,html中,mouseenter,mouseleave,click等方法失效的处理