全局CSS，这将有效地更改一个网格样式的所有元素。我最近学习了如何从 Shawn Olson教程。您可以直接引用他的代码此处。

以下是摘要：

您可以检索 document.styleSheets ，打开rel =nofollow noreferrer> stylesheets 。这实际上会返回页面中所有样式表的数组，但您可以通过 document.styleSheets [styleIndex] .href 属性来确定您正在使用的样式表。一旦找到要编辑的样式表，您需要获取规则数组。这在IE中称为规则，在大多数其他浏览器中称为cssRules。了解您所在的 Cs-s-rule 的方式是由 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和value都可以设置。 
 

让我知道这对ya如何工作，如果你看到任何错误， >

It's easy to set inline CSS values with javascript. If I want to change the width and I have html like this:

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

All I need to do is:

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

It will change the inline stylesheet values. Normally this isn't a problem, because the inline style overrides the stylesheet. Example:

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

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

Using this Javascript:

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

I get the following:

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

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

This is a problem, because not only do I not want to change inline values, If I look for the width before I set it, when I have:

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

The value returned is Null, so if I have Javascript that needs to know the width of something to do some logic (I increase the width by 1%, not to a specific value), getting back Null when I expect the string "50%" doesn't really work.

So my question: I have values in a CSS style that are not located inline, how can I get these values? How can I modify the style instead of the inline values, given an id?

Ok, it sounds like you want to change the global CSS so which will effictively change all elements of a peticular style at once. I've recently learned how to do this myself from a Shawn Olson tutorial. You can directly reference his code here.

Here is the summary:

You can retrieve the stylesheets via document.styleSheets. This will actually return an array of all the stylesheets in your page, but you can tell which one you are on via the document.styleSheets[styleIndex].href property. Once you have found the stylesheet you want to edit, you need to get the array of rules. This is called "rules" in IE and "cssRules" in most other browsers. The way to tell what Cs-s-rule you are on is by the selectorText property. The working code looks something like this:

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.

Let me know how this works for ya, and please comment if you see any errors.