如何用JavaScript实现动态修改CSS样式表


Posted in Javascript onMay 20, 2016

看过我写的《用JavaScript动态建立或增加CSS样式表的实现方法》之后,你就很容易想明白如何修改CSS样式表了。

正好今天在论坛碰到一位朋友问这样的一个问题:

<style>
.ls{width=120px;}
</style>
<script>
//在这里加一句来改变.ls中width的值,如何写
</script>

有的朋友回答:“如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls").width(200);这样就行”。

他是想用JQ的类选择器.ls选择所有使用这个样式的对象,对它们逐个进行调整,而非更改CSS样式表,所以会有“对象很多”的顾虑。

但问题是,这只是改了那些对象的具体表现样式,而并非改了.LS的设置。如果再出现一个使用.LS风格的元素,它还是老样子,你还需要对这个元素再去调整,治标不治本。而且这种方式也决定了不可能简单地通过一句话就实现。

这样想的人还不少,而如果你看了《用JavaScript动态建立或增加CSS样式表的实现方法》这篇文章之后,相信你很容易就想到如何用一句话来解决这个问题,既简洁高效(浏览器会自动重新设置所有应用这个样式的元素),而且真正的修改了样式设置,新增的使用这个样式的元素将自动应用被修改过的设置。于是,你已经学到了和很多人区分开来的更高阶的知识。下面我把方法具体再说一下:

由于上面的例子,不容易看出效果,我下面另外写了个例子,通过颜色的改变,比较容易看到效果:

<STYLE>
	.theforever {width:50px;color:red;}
	#theforever {width:150px;color:silver;}
</STYLE>
<div class="theforever">这里应该是红色的,但它会被下面的JS通过改变CSS样式设置而变成黄色</div>
<div id="theforever">这里应该是银灰色的,的确这个不会发生变化,只作为对比</div>
<script>
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow");
//一句,不就OK了?
</script>

上面的例子,针对的不是某个特定的样式名称,而是泛泛的颜色(如果你直接挪到含有更为复杂的CSS页面里,其中有不表示颜色的RED字样,这还会导致错误。我对不动脑子的代码拿来主义者一向极其反感,不作过多指示),但如果想要针对特定的样式名称进行更改,同样很容易:

从上面,可以看出document.styleSheets[0].cssText就是整个<STYLE></STYLE>内部的内容,相当于一个字串变量,所以假如针对.LS要改变它的设置,只需要把“.ls{width=120px;}”作为 replace 要替换的部分,把“.ls{width=555px;}”作为替换目标,这样就行了。

以上这篇如何用JavaScript实现动态修改CSS样式表就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 #Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 #Javascript
You might like
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
javascript回到顶部特效
2016/07/30 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python实现求最长回文子串长度
2018/01/22 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
PyTorch的torch.cat用法
2020/06/28 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
终止合同协议书
2014/04/17 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
北大自主招生自荐信
2015/03/04 职场文书
运动会开幕式主持词
2015/07/01 职场文书
七年级作文之雪景
2019/11/18 职场文书