javascript - Replacing multiple CSS color values simultaneously -

i making website user can select colors of page. site using 2 colors. background color , color else. (text, borders , background colors in separate boxes.)

i try spectrum.js change colors other background color , text on colored boxes.

i trying modify code found here ariel.

var initialcolor = "#e84e1b"; $("body").css("color", initialcolor); $("divwithfill").css("border-color", initialcolor);  function updatecolor(element, color) {     $(element).css("color", (color ? color.tohexstring() : "")); }  $("#colorchanger").spectrum({     color: initialcolor,     move: function (color) {         updatecolor(".output.render", color);     },     hide: function (color) {         updatecolor(".output.render", color);     } }); 

fiddle: http://jsfiddle.net/mjhud/31/ copy of fiddle found of here. trying change off #e84e1b values color chosen user.

edit: specify: want user able use #colorchanger change css values # e84e1b default. (includes background-color , border) css values # c6c6c6 want unchanged. hope makes more sense.

so problem can't select elements css values, can access stylesheets attached document , pretty funky things them.

a little bit of different method here. no classes have added. no external libraries required. basically...

• loop through every stylesheet attached document.
• loop through every rule in stylesheets.
• loop through every property in rules.
• test value of each property against input string.

• if value matches input string

  • set value of property new color.

• when looping done, return input color save can start on again.

function hextorgb(hex) {      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);      rgb = 'rgb(';      rgb += parseint(result[1], 16) + ", ";      rgb += parseint(result[2], 16) + ", ";      rgb += parseint(result[3], 16) + ')';      return rgb;  }    var initialcolor1 = hextorgb("#c6c6c6");  var initialcolor2 = hextorgb("#e84e1b");  function chameleon(hex, initial) {      var rgb = hextorgb(hex);      var stylesheets = document.stylesheets, stylesheet, i;      (i = 0; (stylesheet = stylesheets[i]); i++) {          var rules = stylesheet.cssrules, rule, j;          if(!rules) continue;          for(j = 0; (rule = rules[j]); j++) {              var styles = rule.style, style, k;              for(k = 0; (style = styles[k]); k++) {                  var value = styles.getpropertyvalue(style);                  if(initial == value) {                      styles.setproperty(style, rgb);                  }              }          }      }      return rgb;  }  document.getelementbyid('picker1').oninput = function(e) {      initialcolor1 = chameleon(e.target.value, initialcolor1);  }  document.getelementbyid('picker2').oninput = function(e) {      initialcolor2 = chameleon(e.target.value, initialcolor2);  }

body { background-color: #c6c6c6; color: #e84e1b;}#divwithfill { height: 50px; width: 50px; border: solid 1px #e84e1b; background-color: #e84e1b; color: #c6c6c6; }#divnofill { height: 50px; width: 50px; border: solid 1px #e84e1b;}

<span class="output render" id="text1">sample text</span>  <div id="divwithfill">sample text</div>  <div id="divnofill">sample text</div>  <label for="picker1">color #1: <input type="color" id="picker1" value="#c6c6c6"></label><br>  <label for="picker2">color #2: <input type="color" id="picker2" value="#e84e1b"></label>