js 修改css文件

在做自動换肤设置时,无意中看到了js修改css的方法,感觉挺有用的,特来学习分享一下。好了,下面开始学习:

js的 document.styleSheets 获取到的是引入的css的对象数组。如:

其中  CSSStyleSheet展开如下:

document.styleSheets[0] 即可得到你所应用的第一个css
rules 和 cssRules 的计数方法是不一样的!rules 是第几个选择器;cssRules 是第几条规则
document.styleSheets[0].cssRules即可得到所有css文件行
document.styleSheets[0].cssRules[0] css第一条
document.styleSheets[0].cssRules[0].style.background="red"//修改第一条的背景颜色为红色

实例:

修改标题1的字体颜色为红色

引入的css:

.wode{
    color: #000;
    font-size: 36px;
}
.article{
    color: #333;
}
h1,h2,h3{
    color: #0D9BF2;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="article">
    <h1>标题一</h1>
    <div class="content">内容</div>
    <h2>标题二</h2>
    <div class="content">内容</div>
    <h3>标题三</h3>
    <div class="content">内容</div>
</div>
<script>
    var cssRule=document.styleSheets[0].cssRules;
    console.log(cssRule);
    console.log(cssRule.length);
    for(var i=0;i<cssRule.length;i++){
        if(cssRule[i].selectorText.indexOf("h1") != -1){
            cssRule[i].style.color="red";
        }
    }
</script>
</body>
</html>

 

修改前:

修改后:

 

时间: 2024-10-26 02:25:37

js 修改css文件的相关文章

后台修改js或者css文件之后,客户端刷新但是无效的问题

前端开发会遇到一个问题:修改测试前端代码的时候,有时候修改了css或者js文件,但是前端刷新的时候却没有反应,不免让人感觉是不是修改错误,其实这有可能是客户端缓存问题.解决方法: 1)Ctrl+F5,清除浏览器缓存(等同于浏览器-->历史数据-->删除cookies) 2)在js或css后加版本号,这时候浏览器客户端会认为这是不同版本的js或者css文件,会自动重新刷新下载(浏览器会缓存下载页面js和css文件) 2.1)形如:.css?v=x  或者 css?version=x     &l

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

Web移动端使用localStorage缓存Js和CSS文件

将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间. 电脑端使用localstorage是测试没有问题的,但是用android的apk打包之后,导致localstorage失效,无法进行缓存,查阅资料之后,得知解决方法: 安卓代码: mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setAppCacheMaxSize(1024*1

为js和css文件自动添加版本号

web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服务器的压力. 但是有些时候缓存也会带来一些比较诡异的问题,呵呵.关于缓存的文章应该不在少数,不再讨论,本文的重点在于为js和css文件自动添加版本号. 这样做的原因是:首先对于js和css类型的静态文件设置了缓存机制,当文件被更新时,需要强迫浏览器下载修改后的新文件,也就是要更新缓存,而通过为js和

[转][前端优化]使用Combres合并对js、css文件的请求

本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.html 在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文. 园子中也有几篇Combres组件的介绍,如:Combres库学习小结以及部分源码分析和使用Combres 库 ASP.NET 网站优化.可部署时

将js和css文件装入localStorage加速程序执行

原理如下: 一次批量加要加载的文件存入数组,采用Ajax方式异步载入各个文件,然后采用循环方式逐个执行下载下来的Js或者Css文件,如果已经被缓存(localStorage)的则省略下载过程. 由于JS采用的是单线程模式运行,在执行某一个js时会阻塞其它并发的js执行,所以会按顺序执行各个js.在执行完所有的脚本之后,图片会被浏览器接着 加载,所以第一次加载速度略慢,后面就会比较快了.在JQuery Mobile 1.4.5+FireFox/微信浏览器下实测效果不错,IE就被省略了,我主要是要在

2个方法通过字[符串参数]加载外部js和css文件

Java语言的异常处理机制可以去确保程序的健壮性,提高系统的可用率,但是Java API提供的异常都是比较低级的(这里的低级是指 " 低级别的 " 异常),只有开发人员才能看的懂,才明白发生了什么问题.而对于终端用户来说,这些异常基本上就是天书,与业务无关,是纯计算机语言的描述,那该怎么办?这就需要我们对异常进行封装了. 近年来,深度学习的研究越来越深入,在各个领域也都获得了不少突破性的进展.基于注意力(attention)机制的神经网络成为了最近神经网络研究的一个热点,本人最近也学习

gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨

参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主要的做法是: 加入如下参数: { base: 'build/assets', merge: true } 其中base为存放上一个生成的rev-manifest.json文件,然后merge为是否拼合进去,最后再输出到base这个目录上,就可以实现js和css文件同在一个rev-manifest.j

引入JS和CSS文件加版本号的作用

形如: <script type="text/javascript" src="/resources/js/myFunction.js?version=0.1.0"></script> <link rel="stylesheet" type="text/css" href="/resources/css/styles/myLocation.css?version=0.1.0"