我有一个Drupal-7网站,我有一张图片:
<img id="blah" src="sites/all/themes/my_theme/test.png" alt="default image" />
我想要的是在其上添加多个边框,然后让用户选择他喜欢的边框,同时每次都使用不同的边框预览图像。
这可能吗?
答案 0 :(得分:2)
你的意思是这样的:
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;