jQuery addClass example

Change class name on click in jQuery

by knrm720

HTML

<h3 class="my-pink">Q52</h3>
<p>進行状況: <progress id="p1" value="90" max="100"></progress></p>
<p>残りは <meter value="6" max="8">全8個中6個</meter></p>
<p><keygen name="key"></p>
<p>満足度（5段階): 
  <input type="range" name="manzoku" min="0" max="5">
  <output name="result" onforminput="value=manzoku.value"></output>
</p>

<hr>
<h3 class="my-pink">Q54</h3>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

<hr>
<h3 class="my-pink">Q55</h3>
<div>Watch this element as ou resize your viewport's width.</div>

CSS

.my-pink {
  color: rgba(242, 107, 138, 0.8);
}

/* rem(root em) */
@media (min-width: 35rem) {
  div {
    background: rgba(217, 65, 30, 0.8);
  }
}

@media screen and (max-width: 30rem) {
  div {
    background: rgba(4, 157, 191, 0.8);
  }
}