css - 如何通过id更改图像源？

Question

有谁知道如何从CSS控制图像源？

我需要能够从CSS更改图像src.我有循环打印< img id=.. >标签,并为每个id它不同的图像.我希望能够通过样式css区域中的id设置源代码.

有谁知道如何做到这一点？

Answer 1

这是不可能的:图像的源是标记的一部分,而不是CSS.

唯一的解决方法是使用具有属性的div元素background-image.您可以在样式表中设置的那些:

<div id="image1"></div>

#image1 { width: 100px; height: 50px; background-image: url(image.gif); }

但是,使用这种方法会失去所有img标签的优点

• 设置alt文本的能力
• 调整
• 打印(大多数浏览器不打印背景图像)
• 搜索引擎索引(可能)

唯一的另一种选择是使用JavaScript,但如果禁用JavaScript,这显然是行不通的,这使得我认为它是禁忌.

Answer 2

这现在可以通过使用内容样式的 CSS3 实现。我使用它通过媒体查询根据窗口大小在滑块内交换图像。

编辑：当我最初发布此内容时，我不知道它目前仅适用于 Webkit。但我怀疑它需要很长时间才能在浏览器中获得更多功能。

HTML

<img class="img1" src="image.jpg">

CSS

@media (min-width: 768px) {
    .img1 {
      content: url(image.jpg);
    }
}
@media (max-width: 767px){
    .img1 {
      content: url(new-image.jpg);
    }
}

Answer 3

这对于 CSS 来说是不可能的。然而，这对于 Javascript 来说非常简单：

 document.getElementById("IdOfImage").src = "SourceOfImage";