使用Javascript更改CSS值
用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％的宽度，而不是一个具体的价值），当我期望string“50％ “并不真正的工作。
所以我的问题：我有CSS样式的值不在内联，我怎么能得到这些值？ 如何修改样式而不是内联值，给定一个ID？
好吧，这听起来像你想改变全球的CSS，所以这将有效地改变所有元素的特色风格一次。 我最近从Shawn Olson教程中学到了如何做到这一点。 你可以在这里直接引用他的代码。
这里是总结：
您可以通过document.styleSheets检索样式表 。 这实际上会返回页面中所有样式表的数组，但是您可以通过document.styleSheets[styleIndex].href属性来确定您所在的是哪一个样式表。 find要编辑的样式表后，您需要获取规则数组。 这在IE中被称为“规则”，在大多数其他浏览器中被称为“cssRules”。 通过selectorText属性来告诉你所在的CSSRule的方式。 工作代码看起来像这样：
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.
让我知道这是如何工作的，请评论，如果你看到任何错误。
请！ 只要问W3（ http://www.quirksmode.org/dom/w3c_css.html ）！ 或者实际上，花了我五个小时……但是在这里！
function css(selector, property, value) { for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles //Try add rule try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length); } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE } }
该function非常容易使用..例如：
<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div> Or: <div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div> Or: <div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>
哦..
编辑：作为@ user21820在其答案中描述，可能有点不必要更改页面上的所有样式表。 以下脚本适用于IE5.5以及最新的Google Chrome浏览器，并仅添加上述的css（）函数。
(function (scope) { // Create a new stylesheet in the bottom // of <head>, where the css rules will go var style = document.createElement('style'); document.head.appendChild(style); var stylesheet = style.sheet; scope.css = function (selector, property, value) { // Append the rule (Major browsers) try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length); } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9) } catch(err) {console.log("Couldn't add style");}} // (alien browsers) } })(window);
收集答案中的代码，我写了这个函数，似乎在我的FF 25上运行良好。
function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){ /* returns the value of the element style of the rule in the stylesheet * If no value is given, reads the value * If value is given, the value is changed and returned * If '' (empty string) is given, erases the value. * The browser will apply the default one * * string stylesheet: part of the .css name to be recognized, eg 'default' * string selectorText: css selector, eg '#myId', '.myClass', 'thead td' * string style: camelCase element style, eg 'fontSize' * string value optionnal : the new value */ var CCSstyle = undefined, rules; for(var m in document.styleSheets){ if(document.styleSheets[m].href.indexOf(stylesheet) != -1){ rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules']; for(var n in rules){ if(rules[n].selectorText == selectorText){ CCSstyle = rules[n].style; break; } } break; } } if(value == undefined) return CCSstyle[style] else return CCSstyle[style] = value }
这是一种将值放入CSS中的方法，即使浏览器无法理解，也会在JS中使用这些值。 例如滚动表中的tbody的maxHeight。
致电：
CCSStylesheetRuleStyle('default', "#mydiv", "height");
CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");
我不知道为什么其他解决scheme通过文档的样式表的整个列表。 这样做会在每个样式表中创build一个新条目，效率不高。 相反，我们可以简单地追加一个新的样式表，只需在那里添加我们想要的CSS规则。
style=document.createElement('style'); document.head.appendChild(style); stylesheet=style.sheet; function css(selector,property,value) { try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); } catch(err){} }
请注意，除非已经存在对该属性更具体的“！important”样式声明，否则即使直接在元素上设置内联样式，也可以重写“！important”属性的值。
我没有足够的评论，所以我会格式化一个答案，但这只是一个问题的示范。
看起来，元素样式在样式表中定义时，它们对getElementById（“someElement”）不可见。
这个代码说明了这个问题… 从下面的代码jsFiddle 。
在testing2中，在第一次调用时，剩余的值是未定义的，所以，应该是一个简单的开关变得混乱。 对于我的使用，我将定义我的重要样式值内联，但它似乎部分地打败了样式表的目的。
这是页码…
<html> <head> <style type="text/css"> #test2a{ position: absolute; left: 0px; width: 50px; height: 50px; background-color: green; border: 4px solid black; } #test2b{ position: absolute; left: 55px; width: 50px; height: 50px; background-color: yellow; margin: 4px; } </style> </head> <body> <!-- test1 --> Swap left positions function with styles defined inline. <a href="javascript:test1();">Test 1</a><br> <div class="container"> <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div> <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div> </div> <script type="text/javascript"> function test1(){ var a = document.getElementById("test1a"); var b = document.getElementById("test1b"); alert(a.style.left + " - " + b.style.left); a.style.left = (a.style.left == "0px")? "55px" : "0px"; b.style.left = (b.style.left == "0px")? "55px" : "0px"; } </script> <!-- end test 1 --> <!-- test2 --> <div id="moveDownThePage" style="position: relative;top: 70px;"> Identical function with styles defined in stylesheet. <a href="javascript:test2();">Test 2</a><br> <div class="container"> <div id="test2a"></div> <div id="test2b"></div> </div> </div> <script type="text/javascript"> function test2(){ var a = document.getElementById("test2a"); var b = document.getElementById("test2b"); alert(a.style.left + " - " + b.style.left); a.style.left = (a.style.left == "0px")? "55px" : "0px"; b.style.left = (b.style.left == "0px")? "55px" : "0px"; } </script> <!-- end test 2 --> </body> </html>
我希望这有助于阐明这个问题。
跳跃
你可以得到任何元素的“计算”风格。
IE使用一种叫做“currentStyle”的东西，Firefox（我假设其他“标准兼容”浏览器）使用“defaultView.getComputedStyle”。
你需要编写一个跨浏览器function来做到这一点，或者使用一个好的Javascript框架，如原型或jQuery（在原型javascript文件中search“getStyle”，在jquery javascript文件中search“curCss”）。
这就是说，如果你需要的高度或宽度，你应该使用element.offsetHeight和element.offsetWidth。
返回的值是Null，所以如果我有Javascript需要知道的东西的宽度做一些逻辑（我增加了1％的宽度，而不是一个特定的值）
请注意，如果将内联样式添加到所讨论的元素中，则它可以充当“默认”值，并在页面加载时由Javascript读取，因为它是元素的内联样式属性：
<div style="width:50%">....</div>
我从来没有见过这样的实际使用，但你应该考虑DOM样式表 。 不过，我真的认为这太过分了。
如果您只想获取元素的宽度和高度，则无论应用哪个维度，都可以使用element.offsetWidth和element.offsetHeight。
这个简单的32行要点可以让你识别一个给定的样式表，并且很容易地改变它的样式：
var styleSheet = StyleChanger("my_custom_identifier"); styleSheet.change("darkolivegreen", "blue");
