如何在运行时更改/删除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规则还不存在的话，我会报告错误。
