当我使用Javascript点击导航菜单链接时，我如何改变页面的背景图像

How can i change background image of the page when i click on navigation menu link using Javascript?

本文关键字：改变 何改变 图像 背景 Javascript 导航 链接 菜单      更新时间：2023-09-26

当我使用JavaScript点击导航链接时，我如何改变页面的背景图像?

<li><a href="#"id="bd"onclick ="one()">facial</a></li>
<script>
 function one(){
   document.getElementById('bd').style.background-image=url(eye.jpg);
   }
</script>

背景图像可以用 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>

你可以用背景图片设置一个类然后用JavaScript添加这个类:

.eye {
   background-image: url(eye.jpg);
}
function one() {
   document.getElementById('bd').classList.add('eye');
}

这样你也可以对图片做任何你想做的样式

相关文章：