Question

编辑：将函数名称更改为swap，并将onClick函数作为DIV元素的一部分，不能正常工作。

我已经阅读了关于这个问题的几个主题，尝试了每个不同的代码，去了W3Schools以获得最正确的代码。我想在有人点击它或其中包含的图像时更改父DIV的背景。

以下是我的HTML的HEAD部分

<script type="javascript/text">
  <!--
    function swap() {
      document.getElementById("links").style.backgroundImage = "url('middle_background.png')";
    }
  -->
</script>

以下是正文：

<div class="nav" id="links" onClick="swap();">
  <img src="images/links.png" alt="Links" />
</div>

这是单独文件中的CSS：

.nav {
  position: relative;
  float: right;
  background: url(images/nav_buttons.jpg) no-repeat;
  width: 111px;
  height: 100px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

我向你保证图片：middle_backgrounds在根文件夹中。（副本也在图像文件夹中。）

Answer 1

在父div上使用onclick而不是img tag。身体将在下面看

<div class="nav" id="links" onClick="changeBackgroundImage();" > <img src="images/links.png" alt="Links" /> </div>

Answer 2

试试这个......

function switch1() {
  document.getElementById("links").style.backgroundImage = "url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')";
}

.nav {
  position: relative;
  float: right;
  background-image: url(images/nav_buttons.jpg) no-repeat;
  width: 111px;
  height: 100px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

<div class="nav" id="links"  onClick="switch1();">
  <img src="https://images.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Links" />
</div>

Answer 3

我测试了它的工作......

不要使用函数开关（），因为这是预定义的，更改函数名称

    <div class="nav" id="links"><img src="Images/progress.gif" alt="Links" onclick="change();" /></div>

    function change() {

 $('#links').css('background-image', 'url(Images/progress.gif)');


           }

onClick CSS背景更改

3 个答案: