Fatal编程技术网

使用Javascript更改CSS值

javascript html css ajax dom

使用Javascript更改CSS值,javascript,html,css,ajax,dom,Javascript,Html,Css,Ajax,Dom,使用javascript设置内联CSS值很容易。如果我想更改宽度，我有如下html： <div style="width: 10px"></div> var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex]; var selector =

使用javascript设置内联CSS值很容易。如果我想更改宽度，我有如下html：

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

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.
它将更改内联样式表值。通常这不是问题，因为内联样式会覆盖样式表。例如：

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

<div id="tId"></div>
我得到以下信息：

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

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


#工业贸易署{
宽度：50%；
}
这是一个问题，因为我不仅不想更改内联值，而且如果我在设置宽度之前查找宽度，当我有：

<div id="tId"></div>
返回的值是Null，因此如果我有Javascript，需要知道某个东西的宽度来执行一些逻辑（我将宽度增加1%，而不是增加到特定的值），那么当我期望字符串“50%”不起作用时，返回Null

所以我的问题是：我的CSS样式中的值不是内联的，我如何获得这些值？对于ID，

，我如何修改样式而不是内联值？我从来没有看到过任何实际的使用，但是你应该考虑一下。然而，我真的认为这太过分了

如果您只想获得元素的宽度和高度，而不考虑从何处应用尺寸，只需使用
element.offsetWidth
和
element.offsetHeight
好的，听起来您想更改全局CSS，这样可以一次有效地更改所有叶柄样式的元素。我最近从一家公司学会了如何做这件事。你可以直接引用他的代码

总结如下：

您可以通过
document.styleSheets
检索。这实际上将返回页面中所有样式表的数组，但您可以通过
document.stylesheets[styleIndex].href
属性来判断您使用的是哪一个样式表。找到要编辑的样式表后，需要获取规则数组。这在IE中称为“规则”，在大多数其他浏览器中称为“cssRules”。通过
selectorText
属性可以判断您正在使用什么。工作代码如下所示：

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

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.
让我知道这对你是如何工作的，如果你看到任何错误，请发表评论。

你可以得到任何元素的“计算”样式

IE使用一种叫做“currentStyle”的东西，Firefox（我假设其他“符合标准”的浏览器）使用“defaultView.getComputedStyle”

要做到这一点，您需要编写一个跨浏览器函数，或者使用一个好的Javascript框架，比如prototype或jQuery（在prototype Javascript文件中搜索“getStyle”，在jQuery Javascript文件中搜索“curCss”）

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

返回的值为Null，因此如果我有Javascript，需要知道某个内容的宽度来执行某些逻辑（我将宽度增加1%，而不是增加到特定的值）

请注意，如果您将内联样式添加到相关元素中，它可以充当“默认”值，并且在页面加载时Javascript可以读取，因为它是元素的内联样式属性：

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

。。。。
我没有足够的代表发表评论，因此我将格式化一个答案，但这只是问题的一个演示

似乎，当在样式表中定义元素样式时，它们对getElementById（“someElement”）.style不可见

这段代码说明了这个问题

在测试2中，在第一次调用时，items left值未定义，因此，应该是一个简单的切换会出错。对于我的使用，我将内联定义我的重要样式值，但它似乎部分违背了样式表的目的

这是页面代码

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


#测试2a{
位置：绝对位置；
左：0px；
宽度：50px；
高度：50px；
背景颜色：绿色；
边框：4倍纯黑；
}
#测试2b{
位置：绝对位置；
左：55px；
宽度：50px；
高度：50px；
背景颜色：黄色；
保证金：4倍；
}
使用内联定义的样式交换左位置函数。


函数test1（）{
var a=document.getElementById（“test1a”）；
var b=document.getElementById（“test1b”）；
警报（a.style.left+“-”+b.style.left）；
a、 style.left=（a.style.left==“0px”）？“55px”：“0px”；
b、 style.left=（b.style.left==“0px”）？“55px”：“0px”；
}
与样式表中定义的样式相同的函数。


函数test2（）{
var a=document.getElementById（“test2a”）；
var b=document.getElementById（“test2b”）；
警报（a.style.left+“-”+b.style.left）；
a、 style.left=（a.style.left==“0px”）？“55px”：“0px”；
b、 style.left=（b.style.left==“0px”）？“55px”：“0px”；
}
我希望这有助于阐明这个问题

请跳过！只要问问w3（）！ 或者事实上，我花了五个小时。。。但是在这里

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

函数css（选择器、属性、值）{

对于（var i=0；i收集答案中的代码，我编写了这个函数，它似乎在我的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
}


这是一种在css中输入值的方法，即使浏览器无法理解，也会在JS中使用这些值。例如，滚动表格中tbody的maxHeight

电话：


CCSStylesheetRuleStyle（'default'，“#mydiv”，“height”）；


CCSStylesheetRuleStyle（'default'、“#mydiv”、“color”、“#EEE”）
我不知道为什么其他解决方案会遍历文档的整个样式表列表。这样做会在每个样式表中创建一个新条目，这是低效的。相反，我们可以简单地附加一个新样式表，然后简单地在那里添加我们想要的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”样式声明

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
}



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){}
}



var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");



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
}