jQuery addClass example

Change class name on click in jQuery

by Sascha

HTML

<div class="highcharts-legend-item highcharts-bar-series highcharts-color-undefined highcharts-series-0" style="position: absolute; left: 8px; top: 3px; opacity: 1;">
  <span style="" data-z-index="2">
    <span class="title">Accumulated downtimes:</span>
    <span class="legend-entry">
      <span class="legend-color-duration color-organizational"></span>
      <span class="legend-label">
        organizational
        <span class="legend-duration">2:02:09</span>
      </span>
    </span>
    
    <span class="legend-entry">
      <span class="legend-color-duration color-technical"></span>
      <span class="legend-label">
        technical
        <span class="legend-duration">2:02:09</span>
      </span>
    </span>
    
    <span class="legend-entry">
      <span class="legend-color-duration color-waittime"></span>
      <span class="legend-label">
        waiting
        <span class="legend-duration">2:02:09</span>
      </span>
    </span>



  </span>

</div>

CSS

body {
  background: white;
  font-size: 12px;
  padding: 20px;
  font-family: Helvetica;
}

.title {
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 8px;
}

.legend-color-duration {
  display: inline-block;
  float: left;
  min-height: 12px;
  min-width: 12px;
  height: 100%;
  margin: 0;
  padding: 5px 5px;
  color: white;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: center;
  border: 1px solid #666;
}

.legend-label {
  height: 16px;
  min-width: 12px;
  float: left;
  display: inline-block;
  border: 1px solid #666;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-left: none;
  padding: 4px 3px 2px 3px;
  margin: 0;
}

.legend-duration {
  border-left: 1px solid black;
  padding-left: 5px;
}

.legend-entry {
  display: inline-block;
  clear: both;
}

.color-technical {
  background-color: #F0A446;
}

.color-organizational {
  background-color: #527BD4;
}

.color-waittime,
.color-waiting {
  background-color: #2F983D;
}

.color-upstream {
  background-color: #DDA0DD;
}

.color-downstream {
  background-color: #A7419A;
}

.color-uncategorized,
.color-undefined {
  background-color: #999999;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})