使用JavaScript比较包含css属性的两个数组的两个子字符串_Javascript_Jquery

使用JavaScript比较包含css属性的两个数组的两个子字符串

javascript jquery

使用JavaScript比较包含css属性的两个数组的两个子字符串,javascript,jquery,Javascript,Jquery,我正在尝试交换一个元素的css并将其显示给用户。。例如：然后，用户将bg颜色say更改为\008000，将内联更改为#框因此，新的css将是#box{背景色：#008000；float:left} 下面是我用于此目的的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

我正在尝试交换一个元素的css并将其显示给用户。。例如：

然后，用户将

bg颜色

say更改为

\008000

，将

内联

更改为

#框

因此，新的css将是

#box{背景色：#008000；float:left}

下面是我用于此目的的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Experimenting</title>
<style type="text/css">
    #box{float:left; width:300px; height:300px; background-color:#008000; border:1px solid #ccc}
    .panel{float:right; width:350px; padding:0 10px}
    .panel h3{font-size:20px; line-height:30px; color:#666; font-weight:normal; font-style:italic; border-bottom:1px solid #CCC}
    .panel p, h4{font-size:16px; color:#343434; padding:10px 0 10px 20px}
    .panel h4{font-weight:normal; padding-top:0; text-align:center}
    .panel p input{width:70px; height:20px; border:1px solid #000; padding:0 5px}
 </style>
 </head>
 <body>
     <div id="box" class="clearfix"><p>Hellloooo....</p></div>
     <div class="panel">
         <p>Background-color: <input type="text" class="color" id="boxbg" value="ffffff"></p>
         <p>Border: <select type="text" id="brwid">
            <option value="0px">0px</option>
            <option value="1px" selected="selected">1px</option>
            <option value="2px">2px</option>
            <option value="3px">3px</option>
            <option value="4px">4px</option>
            <option value="5px">5px</option>
          </select>
                <select type="text" id="brstyl">
                        <option value="solid" selected="selected">Solid</option>
                        <option value="dotted">Dotted</option>
                        <option value="dashed">Dashed</option>
                        <option value="double">Double</option>
                        <option value="none">none</option>
                 </select>
                <input type="text" class="color" id="brclr" value="d4d2cb"></p>

                <input type="button" value="get css" id="code" />
       </div>
       <p id="demo" class="clearfix">Click the button to display the array values after the split.</p>

</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#boxbg').change(function(){
    var boxbg = "#"+$('#boxbg').val();
    $('#box').css('background-color',boxbg);
});

$('#brwid,#brstyl,#brclr').change(function(){
    var brwid = $('#brwid').val();
    var brstyl = $('#brstyl').val();
    var brcolr = "#"+$('#brclr').val();
    var bordr = brwid +" " + brstyl +" "+brcolr;
    $('#box').css('border',bordr);
}
);

$('#code').click(function(){
    var org_css = getElementChildrenAndStyles('#box');
    var chng_css = document.getElementById('box').style.cssText;
    org_css = org_css.replace('background-position:','');
    org_css = org_css.replace('background-repeat:','');
    var intIndexOfMatch;
    while (intIndexOfMatch != -1){
    // Replace out the current instance.
    org_css = org_css.replace('initial initial;','');
    // Get the index of any next matching substring.
    intIndexOfMatch = org_css.indexOf( "initial initial;" );
    }

    //getting only css property
    var open_curl = org_css.indexOf( "{" );
    open_curl = open_curl+1;
    var close_curl = org_css.indexOf( "}" );
    var org_css = org_css.substring(open_curl,close_curl);
    //alert(org_css+"<br>"+chng_css);

    var start,end,prop,value,a;
    document.getElementById("demo").innerHTML ="";
    var old_css=org_css.split(";");
    var inln_csss=chng_css.split(";");
    document.getElementById("demo").innerHTML += "The original css: "+ org_css +"<br><br>The New css: ";
    for(i=0; i<old_css.length-1;i++)
    {
      start = old_css[i].indexOf(":")+1;
      end = old_css[i].length;
      prop = old_css[i].substring(0,start);
      value = old_css[i].substring(start,end);
      //a = "The css is: "+old_css[i]+"<br>"+" property is-   "+prop+"   value is-  "+value+"<br><br>";
        for(j=0; j<inln_csss.length-1;j++)
        {
          var c_start = inln_csss[j].indexOf(":")+1;
          var c_end = inln_csss[j].length;
          var c_prop = inln_csss[j].substring(0,c_start);
          var c_value = inln_csss[j].substring(c_start,c_end);
          //var c_a = "The css is: "+inln_csss[j]+"<br>"+" property is-   "+c_prop+"   value is-  "+c_value+"<br><br>";
          //document.getElementById("demo").innerHTML += "The Changed Css are as follows:<br><br>"+c_a;
          var new_arr = inln_csss.length;
          alert("elements in arr: "+new_arr+" /"+prop);
          if(c_prop==prop)
          {
              alert(prop+" === "+c_prop);
              old_css[i] = inln_csss[j];
          }
        }
        if(i==old_css.length-1)
        {
          document.getElementById("demo").innerHTML += old_css[i];
        }
        else{document.getElementById("demo").innerHTML += old_css[i]+";";}
    }
});



function getElementChildrenAndStyles(selector) {
  selector = selector.split(",").map(function(subselector){
    return subselector + "," + subselector + " *";
  }).join(",");
  elts = $(selector);

  var rulesUsed = [];
  // main part: walking through all declared style rules
  // and checking, whether it is applied to some element
  sheets = document.styleSheets;
  for(var c = 0; c < sheets.length; c++) {
    var rules = sheets[c].rules || sheets[c].cssRules;
    for(var r = 0; r < rules.length; r++) {
      var selectorText = rules[r].selectorText;
      var matchedElts = $(selectorText);
      for (var i = 0; i < elts.length; i++) {
        if (matchedElts.index(elts[i]) != -1) {
          rulesUsed.push(rules[r]); break;
        }
      }
    }
  }
  var style = rulesUsed.map(function(cssRule){
    /*if ($.browser.msie) {
      var cssText = cssRule.style.cssText.toLowerCase();
    } else {*/
      var cssText = cssRule.cssText;
    //}
    // some beautifying of css
    return cssText.replace(/(\{|;)\s+/g, "\$1\n  ").replace(/\A\s+}/, "}");
    //                 set indent for css here ^ 
  }).join("\n");
  return style;
}
});
</script>
</html>

使用jQuery的

.css（）

方法：

element.css('background-color', '#008000');

它将为您设置

元素.style

属性

编辑：如果有许多元素需要更改CSS属性，则可以：

使用CSS选择器

传递元素数组而不是单个元素

公元1年

以下内容将更改

…

的所有子元素的背景色

公元2年

以下操作也将执行相同的操作：

var elements = document.getElementById('container').getElementsByTagName('div');
$(elements).css('background-color', 'green');

请参见示例。

nice idea@kamituel，但我想向用户显示该代码。。基本上，我正在创建一个界面，用户可以在其中修改元素的样式，然后获得包含已更改属性和旧属性的代码too@WannaLearn-是的，它更干净，因为你没有把JS和CSS混合在一起。如果它解决了您的问题，请接受我的回答。例如：用户可以更改颜色，但不能更改浮动、高度或宽度，因此，当用户更改颜色时，用户将使用更改后的颜色获得那些不可更改的属性。。希望你明白我的意思need@WannaLearn-我明白了。您是否考虑过使用

.css（）

？（见更新后的答案）我在我的eg中只使用了1个元素，但有“n”个元素，为每个元素指定css属性太长了。。。

element.css('background-color', '#008000');

$('#container div').css('background-color', '#008000');

var elements = document.getElementById('container').getElementsByTagName('div');
$(elements).css('background-color', 'green');