如何用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的实现简单的分页控件
Oct 10 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
将查询条件的input、select清空
Jan 14 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
JS实现canvas简单小画板功能
Jun 23 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中PDO方式实现数据库的增删改查
2015/05/17 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
javascript 闭包疑问
2010/12/30 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
node.js实现端口转发
2016/04/14 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
vue组件实例解析
2017/01/10 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python对象与引用的介绍
2019/01/24 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
销售经理竞聘书
2014/03/31 职场文书
成事在人观后感
2015/06/16 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
高二数学教学反思
2016/02/18 职场文书
创业计划书之网吧
2019/10/10 职场文书
python字符串常规操作大全
2021/05/02 Python