如何在运行时更改/删除CSS类定义?

我知道可以通过JavaScript在运行时添加新的CSS类定义。 但…

如何在运行时更改/删除CSS类定义?

举个例子,我举个例子:

<style> .menu { font-size: 12px; } </style> 

我想要的是,在运行时,更改.menu类的font-size规则,以便使用此类的页面中的每个元素都将受到影响。

而且,我也想知道如何去除.menu类的定义。

在运行时改变CSS规则并不难,但显然很难find你想要的规则。 PPK在quirksmode.org上快速浏览。

你会想要使用document.styleSheets[i].cssRules这是一个数组,你需要parsing通过find你想要的,然后rule.style.setProperty('font-size','10px',null);

我在http://twelvestone.com/forum_thread/view/31411上find了答案,我在这里逐字地重现了部分内容,因为恐怕线程和非常有用的答案将会消失。;

Flip 2006.06.26,02:45 PM – [Crunchy Frog]文章:2470joindate:2003.01.26

经过大约10到12个小时的search,阅读和修补,我已经完成了! 我今天是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)上testing过了。 “if”语句的原因是一些浏览器使用cssRules …一些只使用规则…而唯一的其他的头发是你不能使用“background-color”来引用样式,你有去掉连字符并在连字符后面加上首字母大写。

要引用第一个CSS规则,您将使用“changeRule(0)”,第二个“changeRule(1)”和第三个“changeRule(2)”等等…

我还没有find一个浏览器,它不工作….但….你说什么都可以,将用于对付你。 一遍又一遍。


BillyBones 2011.01.20,11:57 AM – [在桶]职位:1joindate:2011.01.20

您好,我在这些论坛注册只是为了添加这一点,因为我无法在其他地方方便地find它:

 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规则可以通过它的select器名称来识别,而不是通过cssRules数组中的索引号来识别。

换句话说,您可以使用string参数“selectorText”执行Javascript函数,而不是难以记忆的数字,如果添加了新的样式,则会频繁更改。

谢谢你10-12小时的研究,Flip,我希望我做了一个值得加的。

我认为你正在寻找这个:

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

这可以让你改变与JavaScript的实际规则。 我曾经使用过它,几年前它似乎已经工作。

我已经做了一个简单的助手function,任何人想要做到这一点:

 function getCSSRule(search) { return [].map.call(document.styleSheets, function(item) { return [].slice.call(item.cssRules); }).reduce(function(a, b) { return b.concat(a); }).filter(function(rule) { return rule.selectorText.lastIndexOf(search) === rule.selectorText.length - search.length; })[0]; } 

然后,你可以这样使用它:

 getCSSRule('.mydiv').style.fontSize = '20px'; 

看看下面的例子:

 function getCSSRule(search) { return [].map.call(document.styleSheets, function(item) { return [].slice.call(item.cssRules); }).reduce(function(a, b) { return b.concat(a); }).filter(function(rule) { return rule.selectorText.lastIndexOf(search) === rule.selectorText.length - search.length; })[0]; } document.querySelector('button').addEventListener('click', function(e) { getCSSRule('.iframe').style.backgroundColor = 'orange'; }); 
 .iframe { height: 200px; width: 200px; display: inline-block; border: 1px solid #000; } 
 <p> <button>Change .iframe background-color</button> </p> <div class="iframe"></div> <div class="iframe"></div> 

很难find你想要的规则,因为你必须迭代document.styleSheets [i] .cssRules数组。 (并比较你的类名与selectorText属性)所以我解决这个问题的方法是添加一个新的CSS类,从HTML元素中删除旧的CSS类,并添加这个类而不是它。

 var length = getCssRuleLength(); var newClassName = "css-class-name" + length; //remove preview css class from html element. $("#your-html-element").removeClass("css-class-name"); $("#your-html-element").removeClass("css-class-name" + (length-1)); $("#your-html-element").addClass(newClassName); //insert a css class insertCssRule("." + newClassName + ' { max-width: 100px; }', length); function getCssRuleLength() { var length = 0; if (document.styleSheets[1].cssRules) { length = document.styleSheets[1].cssRules.length; } else if (document.styleSheets[1].rules) { //ie length = document.styleSheets[1].rules.length; } return length; } function insertCssRule(rule, index) { if (document.styleSheets[1].cssRules) { document.styleSheets[1].insertRule(rule, index); } else if (document.styleSheets[1].rules) { //ie document.styleSheets[1].addRule(rule, index); } } 

我在这里把最好的答案,并结合起来,易于使用,跨浏览器兼容性。 另外,如果没有样式表在页面上,或者如果css规则还不存在的话,我会报告错误。

https://github.com/Frazer/dynamicallyAccessCSS.js