如何获取带有内容的图像属性？答案

【问题标题】：How to get image attribute with content?如何获取带有内容的图像属性？
【发布时间】：2013-12-17 16:49:43
【问题描述】：

我可以从标签<a> 获取属性，但我无法从<img> 获取属性。我该怎么办？

HTML

<img src="http://placehold.it/50x50" alt="Some alt"/>
<br/>
<a href="#" alt="Some alt">test link</a>

CSS

img:after{
    content:attr(alt);
    margin-left:10px;
}
a:after{
    content:attr(alt);
    margin-left:10px;
}

【问题讨论】：

为什么不呢？你想得到哪个属性？
alt属性，Demo有问题
请查看stackoverflow.com/questions/5943223/…
我的问题是“alt”属性不是其他的，但是谢谢
根据MDN，::after“匹配所选元素的虚拟最后一个child”，因为<img> can not have child，它不会有任何@987654331 @ 或 ::before。同样适用于<input>。

【解决方案1】：

根据@Passerby 评论，CSS 是不可能的：

根据 MDN， ::after "匹配选定元素”，并且因为不能有子元素，所以它不会有任何 ::after 或 ::before。同样适用于输入。

所以我写了这个 JQuery 代码：

var $imageAlt = '<span class="after">'+$("#image").attr("alt")+'</span>';
$("#image").after($imageAlt);

【讨论】：