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

Question

有没有办法给 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 文本不仅会显示。

Answer 1

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

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

Answer 2

这对于alt属性是不可能的。

我建议使用 jQuery Tooltip 插件来获得这种效果：

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

Answer 3

如果您正在寻找某种工具提示插件，则不太理想，也许可以尝试类似 Tipsy 之类的东西

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

或在此处查看更多示例

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

(*注意没有从属关系)

Answer 4

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

我写了一个简单的插件来做到这一点，稍加修改，它就会按照我的想法做你想做的事。

编辑：您可以做的（虽然它有点老套）是在您的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>';

Answer 5

Tim Down 是对的，您不能设置 alt属性的样式，但是您可以使用 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/

Answer 6

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

JSfiddle 演示

 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" />