javascript - 多次更改一张图片的边框

Question

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

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

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

Answer 1

你的意思是这样的:

function changeBorder(ele) {
  var classToAdd = ele.value;
  document.getElementById("blah").classList.remove("border1", "border2", "border3", "border4", "border5");
  document.getElementById("blah").classList.add(classToAdd);
}

.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;
}

<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>