javascript - 使用 Javascript 更改 CSS 值

Question

使用 javascript 设置内联 CSS 值很容易。如果我想更改宽度并且我有这样的 html:

<div style="width: 10px"></div>

我需要做的就是:

document.getElementById('id').style.width = value;

它将更改内联样式表值。通常这不是问题，因为内联样式会覆盖样式表。示例:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

使用这个 Javascript:

document.getElementById('tId').style.width = "30%";

我得到以下信息:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

这是一个问题，因为我不仅不想更改内联值，如果我在设置宽度之前查找宽度，当我有:

<div id="tId"></div>

返回的值是 Null，所以如果我有 Javascript 需要知道某些东西的宽度来做一些逻辑(我将宽度增加 1%，而不是特定值)，当我期望字符串时返回 Null “50%”实际上不起作用。

所以我的问题是:我在 CSS 样式中有一些值不是内联的，我怎样才能得到这些值？在给定 id 的情况下，如何修改样式而不是内联值？

Answer 1

好的，听起来您想更改全局 CSS，这样可以同时有效地更改特定样式的所有元素。我最近从 Shawn Olson tutorial 学会了如何自己做这件事.可以直接引用他的代码here .

总结如下:

您可以检索 stylesheets通过 document.styleSheets。这实际上会返回页面中所有样式表的数组，但您可以通过 document.styleSheets[styleIndex].href 属性判断您在哪个样式表上。找到要编辑的样式表后，您需要获取规则数组。这在 IE 中称为“规则”，在大多数其他浏览器中称为“cssRules”。告诉什么的方式CSSRule您位于 selectorText 属性旁边。工作代码看起来像这样:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

让我知道这对你来说是如何工作的，如果你发现任何错误，请发表评论。