JavaScript动态修改CSS样式表的正确方法

JavaScript动态修改CSS样式表的方法

在了解《用JavaScript动态建立或增加CSS样式表的实现方法》后，理解如何修改现有CSS样式表便顺理成章。

近日在技术论坛中，有用户提出一个具体需求：

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

部分回答者建议：“若需操作大量.ls类对象，直接使用JS较为繁琐，使用jQuery更为便捷，例如执行$(".ls").width(200);即可。”

这种思路旨在通过jQuery的类选择器.ls选中所有应用该样式的元素，并逐一调整其属性，而非修改CSS样式表本身。因此，回答者担心当对象数量庞大时，JS操作效率低下。

然而，这种做法仅改变了当前已存在元素的具体表现样式，并未触及.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;}”作为替换源，将“.ls{width=555px;}”作为替换目标，执行替换操作即可。

以上即为JavaScript动态修改CSS样式表的完整内容，希望能提供有益参考，欢迎支持本站。