如何用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 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
iframe实用操作锦集
Apr 22 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
JavaScript表单验证开发
Nov 23 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 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 getsiteurl()函数
2009/09/05 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
浅谈php命令行用法
2015/02/04 PHP
ie 调试javascript的工具
2009/04/29 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
vue实现计算器功能
2020/02/22 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python随机读取文件实现实例
2017/05/25 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
基于python历史天气采集的分析
2019/02/14 Python
python如何统计代码运行的时长
2019/07/24 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
最新教师自我评价分享
2013/11/12 职场文书
客户经理岗位职责
2013/12/08 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
生物技术专业求职信
2014/06/10 职场文书
工作所在部门证明
2014/09/21 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
增值税发票丢失证明
2015/06/19 职场文书
《灰雀》教学反思
2016/02/19 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫