jQuery addClass example

Change class name on click in jQuery

by Kelly Hawker

HTML

<script src="https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
<input class="picker" type="text">
<input class="picker2" type="text">

<div class="testClass">
  PALETTE ONE
</div>
<div class="testClass2">
  PALETTE TWO
</div>

CSS

.testClass,
.testClass2 {
  width: 200px;
  height: 200px;
  margin-top: 30px;
  background: rgba(255, 216, 0, 0.8);
  line-height: 200px;
  text-align: center;
}

JavaScript

function injectStyles(rule) {
          let body = document.querySelector('body');
          let style = document.createElement('style');
          style.textContent = rule;
          body.appendChild(style);
        }

        jQuery(function($) {

          $(".picker").spectrum({
            color: "#ffd800",
            preferredFormat: "hex",
            showInput: true,
            change: function(color) {
              var tiny = tinycolor(color);
              color.getAlpha();
              color.setAlpha(0.8);
              color.getAlpha();
              injectStyles('.testClass  { background:' + tiny.toRgbString() + '; color: #fff; border: solid 4px ' + tiny.toHexString() + '}');
            }
          })

          $(".picker2").spectrum({
            color: "#ffd800",
            preferredFormat: "hex",
            showInput: true,
            change: function(color) {
              var tiny = tinycolor(color);
              color.getAlpha();
              color.setAlpha(0.8);
              color.getAlpha();
              injectStyles('.testClass2  { background:' + tiny.toRgbString() + '; color: #fff; border: solid 4px ' + tiny.toHexString() + '}');
            }
          })

        });