问题描述
可以很容易地用JavaScript设置内联CSS值。如果我想改变宽度，我有HTML这样的：
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>
使用这个JavaScript：
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>
返回的值是空的，所以如果我的Javascript需要知道的事情做一些逻辑宽度（我增加宽度1％，而不是一个特定的值），又回到空时，我想到的字符串50％并没有真正的工作。
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.
所以我的问题：我在不在行内CSS样式值，我如何获得这些价值？我如何修改样式，而不是行内的值，给出一个id？
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?
推荐答案
好吧，这听起来像你想改变全局CSS所以这将effictively一次变更的peticular风格的所有元素。我最近学会了如何从肖恩奥尔森教程做自己。您可以直接引用他的code 这里。
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.
下面是总结：
您可以检索样式表通过 document.styleSheets 的>。这实际上将返回所有的样式表的数组在你的页面，但可以告诉你，通过 document.styleSheets [styleIndex] .href 属性是哪一个。一旦你找到了你要编辑的样式表，你需要得到规则的阵列。这就是所谓的在大多数其他浏览器IE中的规则和cssRules。顺便告诉一下 cssRule指定规则你是是由 selectorText 属性。工作code看起来是这样的：
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 CSSRule 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.
这篇关于更改CSS值的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！