使用Javascript更改CSS值

使用javascript设置内联CSS值很容易.如果我想改变宽度,我有这样的HTML:

我需要做的就是:

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

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

使用此Javascript:

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

我得到以下内容:

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

返回的值是Null,所以如果我有Javascript需要知道某些逻辑的宽度(我将宽度增加1%,而不是特定值),当我期望字符串"50%"时返回Null "真的没用.

所以我的问题是:我的CSS样式中的值不是内联的,我如何获得这些值？在给定id的情况下,如何修改样式而不是内联值？

1> Mike..：

---

好吧,听起来你想要改变全局CSS,这将有效地同时改变一个peticular风格的所有元素.我最近从Shawn Olson教程中学会了如何做到这一点.你可以在这里直接引用他的代码.

以下是摘要:

您可以通过检索样式表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.

让我知道这对你是如何工作的,如果你发现任何错误,请发表评论.

---

我在FF 20中找不到`rule.value`.然而,`rule.style`是可设置的,行为类似于`element.style`.参看 [https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule](https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule).在访问`rule.selectorText`之前,检查`rule.type == rule.STYLE_RULE`也许是一个好主意.

2> Leonard Paul..：

---

请!请问w3(http://www.quirksmode.org/dom/w3c_css.html)!或者实际上,我花了五个小时......但在这里!

function css(selector, property, value) {
    for (var i=0; i

该功能非常易于使用..例如:

Click Me!
Or:
Mouseover Me!
Or:
Click Me!


哦..

编辑:正如@ user21820在其答案中所述,更改页面上的所有样式表可能有点不必要.以下脚本适用于IE5.5以及最新的Google Chrome,并且仅添加上述css()函数.


(function (scope) {
    // Create a new stylesheet in the bottom
    // of , 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);

        

3> 小智..：
收集答案中的代码,我写了这个功能,似乎在我的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, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. '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
}


这是一种将值放在将在JS中使用的css的方法,即使浏览器不理解它也是如此.例如,滚动表中的tbody的maxHeight.

致电:

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");