Javascript 在单击时替换背景图像

我在单击时替换背景图像，但它不工作。这是我的html：

 <img id ='pet' src= 'http://ianon.info/pet_support/pic.png' height='200' width='200' style='border: 1px solid black'>;

以下是我的JS+CSS：

 <input type="radio" name="field" value="4" onclick="document.getElementById('pet').style.border='30px solid transparent';document.getElementById('pet').style.border-image='url(http://ianon.info/pet_support/borders/pawprint.png) 120 round'"/> Paw Print Frame &nbsp&nbsp&nbsp

---

我认为这可能是我在onclick之后的语法问题。任何提示都将不胜感激

首先，您必须删除onClick上的代码。用一个函数替换它，这样更干净，更不容易出现错误

<input type="radio" name="field" value="4" onclick="doSomething()"/> Paw Print Frame &nbsp&nbsp&nbsp

然后你就有了你的脚本，它可以是一个外部javascript文件，你可以在HTML的末尾添加它，或者你也可以使用标签在它们之间写JS

<script>
function doSomething(){
    var petIMG = document.getElementById('pet');
    petIMG.style.border='30px solid transparent';
    petIMG.src='url(http://ianon.info/pet_support/borders/pawprint.png) 120 round'
}
</script>

---

这样应该可以工作

您正在将图像渲染为，但您正在尝试将其更改为CSS中的。要渲染不同的图像，请更改img的“src”属性

即改变：

document.getElementById('pet').style.backgroundImage='url(http://ianon.info/pet_su pport/borders/pawprint.png) 120 round';

致：

---

JQuery非常简单和简短。单击单选按钮时替换背景图像

<script>
    $(document).ready(function(){
        $("[name=field:radio]").click(function(){
            $("[id=pet]").css("border", "30px solid transparent").css("background-image", "url(http://ianon.info/pet_support/borders/pawprint.png) 120 round");
        });
    });
</script>

<img id='pet' src='http://ianon.info/pet_support/pic.png' height='200' width='200' style='border: 1px solid black'>

<input type="radio" name="field" value="4"/> Paw Print Frame &nbsp&nbsp&nbsp

---

尝试将onclick提取到函数中，然后将背景图像url用引号括起来。您应该先更改img src属性，而不是更改背景图像。@semperfids是的，可能效率较低，但它并不总是从缓存加载图像。最好一次加载两个图像并使用类？当您有jquery时为什么使用getElementById？？？@PaulG当您有getElementById时为什么使用jquery？？为什么不在他的HTML中使用AngularJS+ReactJS？？对于这个小而短的示例，Jquery是绝对没有必要的。我相信OP正在学习JS，我认为最好不要在他的项目中添加不必要的框架，从而使代码复杂化。如果我试图操作border image属性，该怎么办？OP正在使用jquery，正如他的“jquery”标签所示。如果没有？那么为什么要把标签放在@PaulG中呢？jQuery并不是解决OP问题所必需的。img元素已经分配了一个id，getElementById是。如果有多个单选按钮，并且每个按钮都会产生不同的边框样式，该怎么办？然后必须为每个按钮编写一个jQuery click函数事件，在函数中指定所需的边框样式。另外，请记住通过给多个单选按钮一个唯一的ID来区分它们。不要对每个按钮使用$[name=field:radio，而是使用$[ID=uniqueid]如果您想快速了解更多jquery，请检查

<script>
    $(document).ready(function(){
        $("[name=field:radio]").click(function(){
            $("[id=pet]").css("border", "30px solid transparent").css("background-image", "url(http://ianon.info/pet_support/borders/pawprint.png) 120 round");
        });
    });
</script>

<img id='pet' src='http://ianon.info/pet_support/pic.png' height='200' width='200' style='border: 1px solid black'>

<input type="radio" name="field" value="4"/> Paw Print Frame &nbsp&nbsp&nbsp