如何为 <alt> 标签的字符串设置样式？答案

【问题标题】：How to style the string of an <alt> tag?如何为 <alt> 标签的字符串设置样式？
【发布时间】：2011-05-15 14:44:27
【问题描述】：

有没有办法设置 alt 的样式？用javascript？带有伪属性？像这样：

<img src="foo.jpg" alt="<h1>This is the caption</h1><p>This is some text</p><p>Another text</p>" />

??

而 javascript（我使用 JQuery 框架）会做这样的事情吗？

Get value of <alt> from <img>
make value between <h1></h1> css font-size:22px; color:green;
make value between <p></p> css font-size:14px; color:black;

顺便说一句：javascript 会读取图像的 alt 标记并将它们显示在屏幕上。因此，如果未加载 img，则不会仅显示此 alt 文本。

【问题讨论】：

这不是 alt 属性的用途。为此，最好使用不同的属性。
BTWAY：我不需要工具提示 - 我有一个
获取属性的字符串。而且我需要格式化一个
和一个

... 整个文本显示在一个 div 中。

标签： javascript jquery html css image

【解决方案1】：

这是alt 属性，而不是标签，不能直接设置样式。它只是在图像加载失败时显示的一段文本。您可以设置 <img> 元素的样式，但它会影响大多数浏览器（尽管不是 IE）中替代文本的样式。

如果您指的是当您将鼠标悬停在图像上时出现在某些浏览器中的工具提示，这是通过 title 属性实现的，并且适用于所有元素，而不仅仅是图像。 alt 属性也被 IE 用于图像的此目的，但这不是标准的。无论哪种方式，标题工具提示都无法设置样式。如果您需要更高级的工具提示，则必须创建自己的。我想那里有很多这样的东西。

【讨论】：

【解决方案2】：

alt 属性无法做到这一点。

我推荐使用 jQuery Tooltip 插件来获得这个效果：

http://flowplayer.org/tools/tooltip/index.html

【讨论】：

【解决方案3】：

如果您正在寻找某种工具提示插件，这不是很理想，也许可以尝试类似tipsy

http://onehackoranother.com/projects/jquery/tipsy/

（*注意没有隶属关系）

【讨论】：

【解决方案4】：

不，您不能像之前那样在属性值内嵌套标签。但是，您可以使用 JavaScript/JQuery 将值提取到 DIV 中并设置样式。

我写了a simple plugin to do just that，稍微修改一下，它会按照我的想法做。

编辑：您可以做的（虽然有点老套）是在您的alt 属性中使用以下内容：

<img id="myimg" src="foo.jpg" alt="This is the caption|This is some text" />

然后在您使用的任何代码中，您都可以拆分管道字符并用适当的标签围绕每个部分，如下所示：

var img = $('#myimg');
var alt = img.attr('alt').split('|');

var divContents = '<h1>' + alt[0] + '</h1><p>' + alt[1] + '</p>';

【讨论】：

是的，我到目前为止.. 我可以显示带有样式的文本.. 但整个文本只有一种样式.. 但我需要样式：标题和常规文本 - 这两种不同的东西..

【解决方案5】：

Tim Down 是对的，你不能设置 alt attribute 的样式，但是你可以使用 jQuery 来显示一个自定义的弹出窗口，你可以将其设置为单独的 html 页面。

http://jquery.com/

http://flowplayer.org/tools/tooltip/index.html

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

【讨论】：

【解决方案6】：

当图像以某种方式不显示时，您想要实现的是样式化替代文本。 Alt 不是一个元素，所以你不能直接设置它的样式，但是你可以通过在 img 元素上设置 font-size 来达到预期的效果。

JSfiddle Demo

img{
  font-size: 16px;
}

.small-alt-text{
  font-size:8px;
}
.big-alt-text{
  font-size:24px;
}

<img src="0.png" alt="Image failed to load" />
<br>
<img class="small-alt-text" src="0.png" alt="Image failed to load" />
<br>
<img class="big-alt-text" src="0.png" alt="Image failed to load" />

【讨论】：

和一个