在运行时更改 CSS 规则并不难，但显然很难找到您想要的规则。PPK 在quirksmode.org上对此进行了快速浏览。

你会想要使用document.styleSheets[i].cssRuleswhich 是一个你需要解析的数组来找到你想要的，然后rule.style.setProperty('font-size','10px',null);

我在http://twelvestone.com/forum_thread/view/31411找到了一个答案，我正在这里逐字复制部分线程，因为我担心线程和非常有用的答案会消失。

Flip 2006.06.26, 02:45PM — [ 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:57AM — [在桶中] 帖子：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，我希望我做了一个有value的补充。

我想你正在寻找这个：

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

这使您可以使用 javascript 更改实际规则。我用过一次，几年前它似乎奏效了。

我为任何想要这样做的人制作了一个简单的辅助函数：

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>

我在这里收集了最好的答案，并将它们结合起来，以方便使用和跨浏览器兼容性。此外，如果页面上没有样式表，或者如果 css 规则尚不存在，我会介绍何时抛出错误。

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