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

Posted 2023-03-05

【中文标题】如何为图像的 alt 属性设置样式

【英文标题】：How to style an image's alt attribute

【发布时间】：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 阅读此***.com/questions/4216035/…

“显示外部 HTML”是什么意思？将在用户中显示什么？解释标记，或者字面意思是字符 <img alt="main-logo" src="main-logo.png">?

Alt 就像一个工具提示，它使用浏览器的默认值

【参考方案1】：

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

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

【参考方案2】：

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

var s = '<img  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-]*)\"/, '');

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

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

其实应该是：

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

在你的 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 - 这是一个大问题。这不会直接工作！你完全正确。想想吧。