javascript - 将 css sprite 与 javascript 一起使用

Question

我知道如何使用纯 html 和 css 的 css sprites。但是，如果我通过使用 javascript 从下拉框中选择一个值来动态更改图像怎么办？

<select name="pricing" onchange="check_pricing();" id="pricing_value">
  <option value="">[Please Select]</option>
  <option value="Free" <?php if($pricing == 'Free'): ?> selected="selected"<?php endif; ?>>Free</option>
  <option value="Paid" <?php if($pricing == 'Paid'): ?> selected="selected"<?php endif; ?>>Paid</option>
</select>

function check_pricing() {
  var pricing = document.forms["MyForm"]["pricing_value"].value;
  if (pricing == 'Paid')
  {
    document.getElementById('table_drawad').style.backgroundImage="url('Images/drawad_bg_paid.png')";
  }
  else
  {
    document.getElementById('table_drawad').style.backgroundImage="url('Images/drawad_bg_free.png')";
  }

}

使用 css 我会这样做：

table.table_drawad{
  width:120px;
  height:123px;
  background-image:url('Images/newcampaign_sprite2.png');
  background-position:0px 0px;
}

Answer 1

    .classA{
      width:120px;
      height:123px;
      background-image:url('Images/newcampaign_sprite2.png');
      background-position:0px 0px;
    }

    .classB{
      width:160px;
      height:145px;
      background-image:url('Images/newcampaign_sprite2.png');
      background-position:0px 0px;
    }

var elem = document.getElementById('table_drawad');
if (pricing == 'Paid')
  {
    elem.className = 'classB';
  }
  else
  {
     elem.className = 'classA';
  }