Question

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

我得到字符串的方式：

var img_outerHTML = img[0].outerHTML;

这给了我字符串：

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

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

编辑

感谢techfoobar解决方案以及其他帮助过的人！这是jsFiddle Example。

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字符串转换为（注意：其他所有内容都将由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>

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

2 个答案: