javascript - 替换背景图片onclick

Question

我正在点击时替换背景图像，但它不起作用。这是我的 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”之后的语法问题。任何指示将不胜感激!

Answer 1

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