多次更改一个图像的边框

时间:2016-03-29 10:57:18

标签: javascript jquery html css drupal-7

我有一个Drupal-7网站,我有一张图片:

<img id="blah" src="sites/all/themes/my_theme/test.png" alt="default image" />

我想要的是在其上添加多个边框,然后让用户选择他喜欢的边框,同时每次都使用不同的边框预览图像。
这可能吗?

1 个答案:

答案 0 :(得分:2)

你的意思是这样的:

&#13;
&#13;
function changeBorder(ele) {
  var classToAdd = ele.value;
  document.getElementById("blah").classList.remove("border1", "border2", "border3", "border4", "border5");
  document.getElementById("blah").classList.add(classToAdd);
}
&#13;
.border1{
  border: 3px coral solid;
}
.border2{
  border: 4px coral dashed;
}
.border3{
  border: 5px coral double;
}
.border4{
  border: 6px coral inset;
}
.border5{
  border: 7px coral outset;
}
&#13;
<img id="blah" src="http://placehold.it/150" alt="default image" /><br />
<button onclick='changeBorder(this)' value='border1'>Border 1</button>
<button onclick='changeBorder(this)' value='border2'>Border 2</button>
<button onclick='changeBorder(this)' value='border3'>Border 3</button>
<button onclick='changeBorder(this)' value='border4'>Border 4</button>
<button onclick='changeBorder(this)' value='border5'>Border 5</button>
&#13;
&#13;
&#13;