使用Java脚本更改CSS值

105

使用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％，而不是特定值），则当我期望字符串“ 50％”时返回Null ”确实没有用。

所以我的问题是：我的CSS样式中的值不是内联的，如何获得这些值？给定ID，如何修改样式而不是内联值？

javascript  html  css  ajax  dom 
— 科丁
source
您可以编辑您的帖子吗？一开始有一些不完整的句子，不确定您要寻找的是什么...
— Jason S 2009年
我对您的要求仍然感到困惑。您是否要1）更改CSS本身，以便同时更改所有元素？还是2）一次更改单个项目的CSS？
— 迈克，
关于实际问题，我也感到困惑。对象的当前样式不必与标签的'style'属性相同。
— MattJ
抱歉，我将对其进行更清晰的编辑。我不想设置内联CSS。我希望能够增加/减少样式的宽度。我将编辑一个完整的示例，以查找所需内容。
— 科廷
— Nick Mitchell，

Answers:

90

好的，这听起来好像您想更改全局CSS，这样就可以有效地一次更改石化样式的所有元素。我最近从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.

让我知道这对您的工作原理，如果发现任何错误，请发表评论。

— 麦克风
source
1
如果您有100多个元素，则以这种方式更改CSS 会更快。例如，说一次更改表中某个部分的所有单元格。
— EdH
5
我rule.value在FF 20中找不到。rule.style但是，它是可设置的，其行为类似于element.style。cf. https://developer.mozilla.org/zh-CN/docs/DOM/CSSStyleRule。rule.type == rule.STYLE_RULE在访问之前，检查是否也是一个好主意rule.selectorText。
— Christian Aichinger
1
这太棒了！我正在处理图像过渡，当您开始将大图像放入36个单独的URI中进行切片时，CSS的速度实际上会降低。这只花了我脚本大量的开销。谢谢！
— 杰森·麦加德
1
— the_web
document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};为我工作，谢谢！
— 帕维尔
43

请！只需询问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
    }
}

该函数非常易于使用。

<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);
— 伦纳德·保利
source
严重易于实施。谢谢
— Kaleb Anderson
1
是否有理由修改每个样式表，而不是像我回答的那样仅修改一个新创建的样式表？
— user21820
非常好的实现。先生，您好！
— 杰森·麦加德
1
@ user21820，可能不是。我想我真的很想站在安全的一边。.答案终于更新了，对您表示敬意:)
— Leonard Pauli 2016年
10

收集答案中的代码，我编写了此函数，该函数在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中的方法，即使浏览器无法理解也是如此。例如，滚动表中的躯干的maxHeight。

致电：

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

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

— FrViPofm
source
1
如果样式嵌入在HTML页面中，则该样式document.styleSheets[m].href将为null并失败。
— JCM
4

我不知道其他解决方案为什么要遍历该文档的整个样式表。这样做会在每个样式表中创建一个新条目，这效率很低。相反，我们可以简单地追加一个新的样式表，然后在其中添加所需的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”样式声明。

— 用户名
source
1
有关更复杂的版本，请参见developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/…。
— user21820
1
非常真实 如果.insertRule失败（对于IE9之前的支持），请确保使用.addRule（selector，property +'：'+ value）。
— 伦纳德·保利
3

我没有足够的代表发表评论，所以我将设置答案的格式，但这只是有关问题的演示。

看来，在样式表中定义元素样式时，它们对于getElementById（“ someElement”）。style不可见。

这段代码说明了问题。jsFiddle下面的代码。

在测试2中，在第一次调用时，剩余项目的值是不确定的，因此，应该是一个简单的切换就搞砸了。对于我的使用，我将内联定义重要的样式值，但它似乎确实部分地破坏了样式表的目的。

这是页面代码...

<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>

我希望这有助于阐明问题。

跳跃

— BentFX
source
2

您可以获取任何元素的“计算”样式。

IE使用的是“ currentStyle”，而Firefox（我认为其他“符合标准”的浏览器）则使用“ defaultView.getComputedStyle”。

您需要编写一个跨浏览器函数来执行此操作，或者使用良好的Javascript框架（例如原型或jQuery）（在原型javascript文件中搜索“ getStyle”，在jQuery javascript文件中搜索“ curCss”）。

也就是说，如果您需要高度或宽度，则可能应该使用element.offsetHeight和element.offsetWidth。

返回的值为Null，因此，如果我有需要知道某些东西的宽度以进行某种逻辑处理的Javascript（我将宽度增加1％，而不是特定的值）

请注意，如果您向相关元素添加内嵌样式，则它可以用作“默认”值，并且在Javascript加载页面时就可以读取，因为它是元素的内嵌样式属性：

<div style="width:50%">....</div>
0

我从未见过对此的任何实际使用，但是您可能应该考虑使用DOM样式表。但是，老实说，我认为这太过分了。

如果您只是想获取元素的宽度和高度，而不论从何处应用尺寸，只需使用element.offsetWidth和即可element.offsetHeight。

— 派克（Rakesh Pai）
source
我的用法：<style> #tid {width：10％; } </ style> <div id ='tid'onclick =“ increase（'tid'）”> </ div>增加将检查宽度是否<100％，如果增加，则增加1％。document.getElementById.style.width返回null，因为没有内联值。有没有比DOM样式表更简单的方法？
— 科尔丁
0

也许试试这个：

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, 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
}
— 沙克
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.