Html css - 如何通过其 id 更改图像源？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5134681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - how to change image source by its id?
提问by gabi
Does anyone know how can I control the image source from the CSS?
有谁知道如何从 CSS 控制图像源？
I need to be able to change the image src from the CSS. I have loop printing < img id=.. >tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
我需要能够从 CSS 更改图像 src。我有循环打印< img id=.. >标签，每个 ID 都有不同的图像。我希望能够通过样式 css 区域中的 id 设置源。
Does anyone know how to do this?
有谁知道如何做到这一点？
采纳答案by Peter Olson
That is not possible with CSS. However, this is very easy with Javascript:
这在 CSS 中是不可能的。但是，使用 Javascript 非常容易：
document.getElementById("IdOfImage").src = "SourceOfImage";
回答by Pekka
This is not possible: The image's source is part of the markup, not CSS.
这是不可能的：图像的来源是标记的一部分，而不是 CSS。
The only workaround would be having divelements with background-imageproperties instead. Those you could set from within the style sheet:
唯一的解决方法是使用具有属性的div元素background-image。您可以从样式表中设置的那些：
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the imgtag's advantages like
但是，使用这种方法，您将失去img标签的所有优点，例如
- The ability to set an
alttext - Resizing
- Printing (most browsers don't print background images)
- Search engine indexing (probably)
- 设置
alt文本的能力 - 调整大小
- 打印（大多数浏览器不打印背景图像）
- 搜索引擎索引（可能）
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
唯一的另一种选择是使用 JavaScript，但如果禁用 JavaScript，这显然不起作用，这在我看来是禁忌。
回答by Charbrec
This is now possible with CSS3 using the Content style. I use this to swap images within a slider based on window size through media queries.
这现在可以通过使用内容样式的 CSS3 实现。我使用它通过媒体查询根据窗口大小在滑块内交换图像。
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
编辑：当我最初发布此内容时，我不知道它目前仅适用于 Webkit。但我怀疑它需要很长时间才能在浏览器中获得更多功能。
HTML
HTML
<img class="img1" src="image.jpg">
CSS
CSS
@media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
@media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
回答by markijbema
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
你不能真正做到这一点，但是，如果你确实需要使用 CSS 做到这一点，你可以为两个具有相同大小的图像做到这一点，如下所示：
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
不过只在 FF3.6 中测试过。
回答by AaA
I found this articlethat might be useful. It actually changes background of an image
我发现这篇文章可能有用。它实际上改变了图像的背景
here is the example in case website goes missing:
这是网站丢失的示例：
HTML
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
回答by Rolf
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.
如果您既不想使用背景也不想使用 javascript，则可以将 2 个具有不同 src 的图像叠加在一起（使用绝对定位）并使用 CSS 隐藏一个或另一个。从视觉上看，它将与更改 src 相同。
