如何用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 相关文章推荐
js精度溢出解决方案
Dec 02 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
详解js的六大数据类型
Dec 27 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
React实现评论的添加和删除
Oct 20 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之面向对象
2013/05/15 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
js中文逗号转英文实现
2014/02/11 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
手机端转换rem适应
2017/04/01 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python实现简单名片管理系统
2018/11/30 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python同步windows和linux文件
2019/08/29 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
集体生日活动方案
2014/08/18 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
详解Nginx 工作原理
2021/03/31 Servers
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
关于Redis的主从复制及哨兵问题
2022/06/16 Redis