javascript - 当我使用 JavaScript 单击导航菜单链接时，如何更改页面的背景图像？

Question

当我使用 JavaScript 单击导航链接时，如何更改页面的背景图像？

<li><a href="#"id="bd"onclick ="one()">facial</a></li>

<script>
 function one(){
   document.getElementById('bd').style.background-image=url(eye.jpg);
   }
</script>

Answer 1

可以使用 backgroundImage更新背景图像 并且该值应该是字符串，因此用引号将其括起来。

<li><a href="#" id="bd" onclick="one()">facial</a>
</li>

<script>
  function one() {
    document.getElementById('bd').style.backgroundImage = 'url(eye.jpg)';
  }
</script>

<小时/>

您还可以通过传递元素引用来简化代码。

<li><a href="#" id="bd" onclick="one(this)">facial</a>
</li>

<script>
  function one(ele) {
    ele.style.backgroundImage = 'url(eye.jpg)';
  }
</script>