如何更改内容：使用 javascript 的 url()答案

【问题标题】：How to change content:url() using javascript如何更改内容：使用 javascript 的 url()
【发布时间】：2022-02-15 05:04:46
【问题描述】：

您好，我正在尝试使用一组图片制作交通信号灯。我目前需要在单击按钮时更改 css 中规定的图像路径，以便灯光的图片发生变化。所以在这种情况下，当按钮调用函数时，需要更改每个类的 content.url() 行。我目前使用的方法不正确，但我认为它可能有助于帮助您理解。


<style>
#rect{
    height:550px;
    width:180px;
    border:1px solid #000;
}
.black1 {
  position: relative;
  top: 10px;
  left: 10px;
  content.url('black.png')
}
.black2 {
  position: relative;
  top: 20px;
  left: 10px;
  content.url('black.png')
}
.black3 {
  position: relative;
  top: 30px;
  left: 10px;
  content.url('black.png')
}
</style>

<Body>
<div id="rect">
<img class="black1" />
<img class="black2" />
<img class="black3" />
</div>

<script>
var x = ["black.png", "red.png", "orange.png",'green.png'];
var i = -1;
function change(){
    i++;
    if (i == 0){
    document.getElementByClass('black1').src=x[1];
    document.getElementByClass('black2').src=x[0];
    document.getElementByClass('black3').src=x[0];
    }

}
</script>
<button onclick = "change()">Change light</button>
</div>
</Body>
</html>

【问题讨论】：

就个人而言，我更喜欢静态加载页面上的所有图像并使用 style.display 来显示和隐藏它们

标签： javascript html css

【解决方案1】：

我会将您的 CSS 类划分为红色、橙色/黄色、绿色。然后您可以使用 classList 函数。您将在下面找到一个简单的工作示例。随时改进它。

let i = -1;

function change() {
  const tl = document.querySelectorAll('.light');  
  i++;    
  
  if (i == 0) {
    tl[0].classList.add('red')
  }
  if (i == 1) {
    tl[1].classList.add('yellow')
  }
  if (i == 2) {
    tl[2].classList.add('green')
  }  
  if (i == 3) {
    tl[2].classList.remove('green');
    tl[1].classList.remove('yellow');
    tl[0].classList.remove('red');
    i = -1;
  }
}

#rect{
    height:350px;
    width:120px;
    border:1px solid #000;  
}
img {
  height: 100px;
}

.light {
  position: relative;
  top: 10px;
  left: 10px;
  content: url(https://via.placeholder.com/150/000000);  
}

.red {
  content: url(https://via.placeholder.com/150/FF0000);  
}

.yellow {
  content: url(https://via.placeholder.com/150/FFFF00);
}

.green {
  content: url(https://via.placeholder.com/150/008000);  
}

<Body>
  
<div id="rect">
<img class="light" />
<img class="light" />
<img class="light" />
</div>

<script>

</script>
<button onclick = "change()">Change light</button>
</div>
</Body>
</html>

【讨论】：

感谢您的时间和精力！
@HakahaglaX 欢迎您！这很有帮助，+1Upvote 会非常好 ;-) 谢谢！
对不起，我没有足够的声誉来做 +1 :(
@HakahaglaX 感谢您的反馈。我忘了！我赞成 ;-) 现在它可以工作了。非常感谢！

【解决方案2】：

为了让你的程序正常工作，我会让它看起来像这样：

在 css 中去掉 content.url('black.png')
将默认网址设置为您的 img 标签，即“black.png”
制作工作代码：

const urls = ["black.png", "red.png", "orange.png",'green.png'];
let index = -1;
const imgs = ["black1", "black1", "black1"].map(className => document.getElementByClass(className));

function change(){
  index++;
  // will take rest of division,
  // for example 4 % 3 === 1, 5 % 3 === 2, 6 % 3 === 0
  const currentLight = index % 3;
  imgs.forEach((image, i) => {
    if (i === currentLight) {
      // current image should be active and we map it correct light urls
      // for example currentLight is 0, if will make it url[0] which is red
      image.src = urls[currentLight + 1];
    }
    else {
      // turn off the lights that are not equal to currentLight
      image.src = urls[0];
    }
  });
}

change(); // initial call to turn the red light on. If not called all lights will be off

希望这是您正在寻找的行为。

但我写道，您需要摆脱content: url，而您的问题是关于更改它。基本上 JavaScript 不能修改类（除非你用 JS 从字符串动态生成它们，但这是一个糟糕的主意）。如果你真的想使用content: url（并不意味着你应该），你需要创建3个类.red、.orange和.green，并使用各自的url，并像切换src一样用JS切换这些类.

【讨论】：