如何在 Javascript 中使用条件更改 Div 的背景图像

How to change background image of a Div using Conditionals in Javascript

本文关键字：Div 图像 背景 条件 Javascript      更新时间：2023-09-26

每当变量"health药水金额"达到零时，我正在尝试更改div的"背景图像"。我希望当满足该条件时，结果图片为："https://i.stack.imgur.com/g4QK8.jpg"，悬停时没有明显的差异。

if(healthPotionAmount == 0){
//What I'm trying to find
}
#healthPotion {
   background-image: url('http://i.imgur.com/EXiNh2M.jpg');
   height: 50px;
   width: 50px;
}
#healthPotion:hover {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
    width: 50px;
   height: 50px;
}
<div id="healthPotion"></div>

感谢帮助，Macint0sh_Plus

来了！我输入了healthPotionAmount提示，以便您可以测试值。

var healthPotionAmount = prompt('Enter potion amount:');
if (healthPotionAmount == 0) {
    document.getElementById('healthPotion').className += ' empty';
}
#healthPotion {
   background-image: url('http://i.imgur.com/EXiNh2M.jpg');
   height: 50px;
   width: 50px;
}
#healthPotion:hover {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
    width: 50px;
   height: 50px;
}
#healthPotion.empty {
   background-image: url('http://i.imgur.com/RvhXjej.jpg');
}
<div id="healthPotion"></div>

试试这个解决方案，它使用JavaScript - 所以这里不需要jQuery或任何框架。

您可以删除此临时变量 

var healthPotionAmount = 0;

从代码来看，这只是为了您可以在 StackOverflow 上运行以测试而不会出错。

// Tmp variable here to avoid errors
var healthPotionAmount = 0;
if(healthPotionAmount == 0){
//What I'm trying to find
  var healthPotion = document.getElementById("healthPotion");
  healthPotion.className += " empty-potion";
}
#healthPotion {
   background-image: url('http://i.imgur.com/EXiNh2M.jpg');
   height: 50px;
   width: 50px;
}
#healthPotion.empty-potion {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
}
#healthPotion:hover {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
    width: 50px;
   height: 50px;
}
<div id="healthPotion"></div>

希望这对您有所帮助。 我有点想象你想用这个做什么。 每当您点击药水时，这将减少生命药水。

//define your varaibles first:
var healthPotionAmount = 3;
//Get the DOM elements and store them in variables
var hpEle = document.getElementById("healthPotion");
var numHpLeftEle = document.getElementById("potionsLeft");
//Set the number of HPs
numHpLeftEle.innerHTML = healthPotionAmount;
//Start to lose some health.
function useHealthPotion() {
  //Stop doing work when we are below 0 HPs
  if(healthPotionAmount <=0) {
    return;
  }
  //Decrement the HP count
  healthPotionAmount = healthPotionAmount-1;
  //Add the class when we are empty
  if(healthPotionAmount == 0){
    hpEle.classList.add("empty");
  }
  //Update our label.
  numHpLeftEle.innerHTML = healthPotionAmount;
}
#healthPotion {
   background-image: url('http://i.imgur.com/EXiNh2M.jpg');
   height: 50px;
   width: 50px;
}
#healthPotion.empty {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
}
<!--Add an onclick handler that will substract one health-->
<div id="healthPotion" onclick="useHealthPotion()"></div>x<span id="potionsLeft"></span>

这应该可以解决问题

var healthPotionAmount = 0;
if(healthPotionAmount == 0){
//What I'm trying to find
  document.getElementById('healthPotion').className += ' no-potion';
}
#healthPotion {
   background-image: url('http://i.imgur.com/EXiNh2M.jpg');
   height: 50px;
   width: 50px;
}
#healthPotion.no-potion {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
}
#healthPotion:hover {
   background-image: url('http://i.imgur.com/nhZaKud.jpg');
    width: 50px;
   height: 50px;
}
<div id="healthPotion"></div>

相关文章：