Как стилизовать атрибут alt изображения

Я пытаюсь показать (внешний) html тега img, но я хочу, чтобы атрибут alt был в красном цвете.Как стилизовать атрибут alt изображения

То, как я получаю строку:

var img_outerHTML = img[0].outerHTML;

Это дает мне строку:

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

Так как я могу иметь main-logo быть красным?
Спасибо!

EDIT

Благодаря techfoobar для решения, и все остальное, что помогло!
Адрес jsFiddle Example.

источник

2013-05-21 m.spyratos

Вам нужен плагин для того, альт тег оказывается в браузере и не может быть изменен HTML/CSS в одиночку. – Matthew

@Matthew, Спасибо. У вас есть что-то в виду? –

@ m.spyratos прочитайте это http://stackoverflow.com/questions/4216035/css-background-image-alt-attribute?rq=1 – sylwia

Предполагая, что вы пытается отобразить внешний 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 Credit:. 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; 
}

источник

2013-05-21 13:40:06 techfoobar

I + 1ed это, но reg exp, вероятно, мог бы использовать некоторую работу, поскольку он действительно ограничен тем, что может быть в значении. – epascarello

Да, особенно бит '[a-z0-9 \ s -] *'. – techfoobar

@techfoobar, Это была моя первая мысль. Я попробовал это, но на самом деле это отображает следующее: ' '. Поэтому он не добавляет' span' как 'html', а как строку. –

-1

Это также может быть сделано только CSS.
просто оберните метку img img в тег span и примените красный цвет к этому диапазону. попробовать это

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

источник

2013-05-21 13:59:05 Sumit

Как стилизовать атрибут alt изображения

ответ

Смежные вопросы