Как изменить цвет текста при использовании document.getElementById ("id"). InnerHTML

Question

Я пытаюсь изменить текст span на что-то еще, когда происходит определенное событие. Я делаю это как:

document.getElementById("usernameError").innerHTML = "**Message"; 

Я хочу показать то же самое в другом цвете. Любая идея о том, как это сделать? Очень ценим!

Answer 1

Вы всегда можете просто поместить сообщение в промежуток и поместить на него атрибут стиля. Это следует сделать это:

document.getElementById("usernameError").innerHTML = "<span style='color: red;'>**Message</span>"; 

Answer 2

Как вы можете найти в Mozilla Developer Network, вы можете использовать HTMLElement.style свойство изменять любой стиль на элемент.

Так что вы можете сделать что-то вроде этого, чтобы окрасить его в красном цвете:

document.getElementById("usernameError").style.color = '#d00' 

Answer 3

Более будущее доказательство и многоразовые решение, вероятно, будет добавить класс либо текущий элемент или элемент диапазона, в зависимости от ваши требования:

document.getElementById("usernameError").className = "color-red"; 

Или отработка решения Эрикс:

document.getElementById("usernameError").innerHTML = "<span class='color-red'>**Message</span>"; 

Тогда в вашем CSS:

.color-red{ 
    color: #F00; 
} 

Вы могли бы, очевидно, также добавить Diff цвета и атрибут в гораздо более ремонтопригодны образом, как это.

ПРИМЕЧАНИЕ: className Возвращает строку, представляющую класс или список классов, разделенных пробелами, элемента.