我知道可以通过JavaScript在运行时添加新的CSS类定义。但是..。
如何在运行时更改/删除类定义?
例如,假设a我有下面的类:
<style>
.menu { font-size: 12px; }
</style>
我想要的是在运行时更改.menu
类的font-size
规则,这样页面中使用这个类的每个元素都会受到影响。
而且,我还想知道如何删除.menu
类定义。
发布于 2009-04-08 13:45:41
在运行时更改CSS规则并不困难,但显然很难找到您想要的规则。PPK在quirksmode.org上对此进行了快速浏览。
您需要使用document.styleSheets[i].cssRules
,这是一个需要解析以找到所需数组的数组,然后使用rule.style.setProperty('font-size','10px',null);
发布于 2011-05-05 09:15:49
我在http://twelvestone.com/forum_thread/view/31411上找到了答案,我在这里逐字复制了部分线索,因为我担心这个线索和非常有用的答案会消失。
Flip 2006.06.26,02:45 02 Crunchy Frog帖子: 2470加入日期: 2003.01.26
经过大约10到12个小时的搜索、阅读和修补,我已经做到了!我今天是CSS/JS代码忍者!
使用的JS代码如下:
<script language="JavaScript">
function changeRule(theNumber) {
var theRules = new Array();
if (document.styleSheets[0].cssRules) {
theRules = document.styleSheets[0].cssRules;
} else if (document.styleSheets[0].rules) {
theRules = document.styleSheets[0].rules;
}
theRules[theNumber].style.backgroundColor = '#FF0000';
}
</script>
我已经在FF(Mac),Safari(Mac),O9(Mac),IE5(Mac),IE6(PC),FF(PC)上进行了测试,它们都可以工作。使用'if‘语句的原因是一些浏览器使用cssRules...有些人只是使用规则。唯一不同的是,你不能用“背景颜色”来表示风格,你必须去掉连字符,把连字符后面的第一个字母大写。
要引用第一个CSS规则,您可以使用"changeRule(0)“、第二个"changeRule(1)”和第三个"changeRule(2)“,依此类推……
我还没有找到不能正常工作的浏览器...然而……你说的任何话都会被用来对付你。一遍又一遍。
BillyBones 2011.01.20,11:57 11在桶中发布:1加入日期: 2011.01.20
您好,我在这些论坛上注册只是为了添加一点,因为我在其他地方找不到它:
function changeStyle(selectorText)
{
var theRules = new Array();
if (document.styleSheets[0].cssRules) {
theRules = document.styleSheets[0].cssRules;
}
else if (document.styleSheets[0].rules) {
theRules = document.styleSheets[0].rules;
}
for (n in theRules)
{
if (theRules[n].selectorText == selectorText) {
theRules[n].style.color = 'blue';
}
}
}
这只是使CSS规则可以通过它的选择器名称而不是它在cssRules数组中的索引号来标识。
换句话说,您可以使用字符串参数"selectorText“来执行Javascript函数,而不是一个很难记住并且在添加新样式时容易频繁更改的数字。
谢谢你10到12个小时的研究,Flip,我希望我做了一个有价值的补充。
发布于 2009-04-08 13:44:16
我认为你正在寻找这个:
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
这使您可以使用javascript更改实际的规则。我曾经用过一次,几年前它似乎起作用了。
https://stackoverflow.com/questions/730048
复制相似问题