如何在 Javascript 中使用条件更改 Div 的背景图像
How to change background image of a Div using Conditionals in Javascript
每当变量"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>
相关文章:
- 只从DIV删除图像,而不是整个网站
- 下载Div&画布为一个图像
- 以Jquery为中心的Div中的图像对齐
- 从Div创建图像,并使用Javascript和ASP.net将其保存到服务器
- 使用Javascript对象为具有两个背景图像的DIV设置样式时出现问题
- 点击一个按钮,有没有一种方法可以检查Div内部的图像
- HTML5拖放新图像并替换Div中的现有图像
- HTML JS在DIV中附加随机图像
- 根据容器 DIV 中的图像动态调整容器 DIV 的大小
- Div在单击图像时未执行slideTogle()
- 在Div中刷新图像,只更改文件内容,不更改名称
- 如何设置DIV背景图像css jquery
- 如何将SVG元素和Div放入图像中,以便用户可以下载
- 在使用IE9上传之前预览Div中的图像
- Div背景图像打印空白
- 链路翻转时的 DIV 背景图像交换
- 在加载 DIV 之前显示微调器图像
- 图像/DIV 元素切换全屏
- 通过 DIV 数据打开图像
- 使用Javascript更改DIV图像样式