如何用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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
JS实现进度条动态加载特效
Mar 25 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上传图片并压缩的实现方法
2015/12/22 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP 无限级分类
2017/05/04 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python解析xml中dom元素的方法
2015/03/12 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
一些.net面试题
2014/10/06 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
如何执行一个shell程序
2012/11/23 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
早恋主题班会
2015/08/14 职场文书
大学军训口号大全
2015/12/24 职场文书