javascript - 如何为图像的 alt 属性设置样式

Question

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

我获取字符串的方式：

var img_outerHTML = img[0].outerHTML;

这给了我字符串：

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

那我怎么能main-logo红呢？
谢谢！

编辑

感谢您techfoobar的解决方案和其他所有帮助的人！
这是一个jsFiddle 示例。

Answer 1

假设您尝试在另一个元素中显示外部 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;
}

Answer 2

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

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