如何为图像的 alt 属性设置样式答案

【问题标题】：How to style an image's alt attribute如何为图像的 alt 属性设置样式
【发布时间】：2013-05-16 07:18:11
【问题描述】：

我正在尝试显示img 标记的（外部）html，但我希望alt 属性为红色。

我获取字符串的方式：

var img_outerHTML = img[0].outerHTML;

这给了我字符串：

<img alt="main-logo" src="main-logo.png">

那么我怎样才能让main-logo 变成红色呢？
谢谢！

编辑

感谢 techfoobar 提供的解决方案以及所有提供帮助的人！
这是jsFiddle Example。

【问题讨论】：

你需要一个插件，alt标签由浏览器呈现，不能单独通过html/css更改。
@Matthew，谢谢。你有什么想法吗？
@m.spyratos 阅读此stackoverflow.com/questions/4216035/…
“显示外部 HTML”是什么意思？将在用户中显示什么？解释标记，或者字面意思是字符 <img alt="main-logo" src="main-logo.png">?
Alt 就像一个工具提示，它使用浏览器的默认值

标签： javascript jquery

【解决方案1】：

这也可以仅由 CSS 完成。
只需将您的 img 标签包装到 span 标签中，并将红色应用于该 span。试试这个

<span style="color: red;"><img alt="main-logo" src="main-logo.png"></span>

【讨论】：

【解决方案2】：

假设你试图在另一个元素中显示外部 HTML，你可以这样做：

var s = '<img alt="main-logo" src="main-logo.png">';
// As pointed out by user bfavaretto, we need to html-encode it before
// injecting the <span>
s = $('<div/>').text(s).html();
s = s.replace(/alt=\"([a-zA-Z0-9\s-]*)\"/, 'alt="<span class=\'red\'>$1</span>"');

完成后，这会将 HTML 字符串转换为（注意：除了 span 之外的所有内容都将被 HTML 编码。信用：https://stackoverflow.com/a/1219983/921204）

<img alt="<span class='red'>main-logo</span>" src="main-logo.png">

其实应该是：

&lt;img alt="<span class='red'>main-logo</span>" src="main-logo.png"&gt;

在你的 CSS 中，添加：

span.red {
    color: red;
}

【讨论】：

我对此进行了 +1，但 reg exp 可能需要一些工作，因为它实际上仅限于值中的内容。
是的，尤其是[a-z0-9\s-]* 位。
@techfoobar，这是我的第一个想法。我试过了，但它实际上显示了这个：<img alt="<span class='red'>main-logo</span>" src="main-logo.png">。所以它不会将span 添加为html，而是作为字符串添加。
用户可能会遇到一个小问题：img outerHTML 在替换之前必须进行 html 编码，因此当它显示在容器中时，只有注入的 span 会被解析为实际标签。
@bfavaretto - 这是一个大问题。这不会直接工作！你完全正确。想想吧。