underline часть внутреннегоHTML

Question

Я строю таблицу, которая отображает даты следующих 10 дней. Мне нужно вставить день, дату, месяц и год в таблицу. Я использую этот код JavaScript для этого:

document.getElementById(i).innerHTML = weekday + " " + date + " " + month + " " + year; 

Моя проблема:

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

Если требуется более подробная информация или код, обратитесь к нам. Это моя первая публикация здесь и только javascripting в течение месяца или около того.

Answer 1

Вы хотите использовать класс CSS, чтобы придать смысл той части элемента и стиль его. Оберните его в <span> с данным классом, а затем примените стили через свою таблицу стилей.

document.getElementById(i).innerHTML = weekday + " " 
             + date 
             + " <span class='month'>" + month + "</span> " 
             + year; 

Стиль

.month { text-decoration: underline; } 

Используя семантический класс, а не тегов или инлайн конкретного стиля, позволяет легко изменить стиль этого типа дисплея на глобальной основе, вместо того, чтобы обновить каждое отдельное место, где происходит стилизация.

EDIT: Очевидно, что вы знаете свое приложение лучше всего, но я бы избегал подчеркивания, за исключением ссылок или где соглашение диктует (например, некоторые заголовки), что его следует использовать. Это может быть очень запутанным для пользователя, поскольку подчеркивание в браузере обычно передает, что что-то является кликабельной ссылкой. Это не похоже на то, что вы собираетесь здесь, но я могу ошибаться.

Answer 2

Не элегантное решение, но только работает:

document.getElementById(i).innerHTML = weekday + " " + date + " <span style='text-decoration: underline;'>" + month + "</span> " + year; 

Answer 3

Почему вы не просто дать ему разметки, так как innerHTML означает, что вы можете поместить HTML там.

document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u>" + year; 

Я просто использовал подчеркивание тег :)

Answer 4

Вы можете достичь этого, используя HTML-тег <u>. Например:

document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u> " + year; 

Вот пример с использованием описанного выше метода>http://jsfiddle.net/vuS4B/

Но это могло бы быть лучше для Вас, чтобы сделать это, используя <span> элемент, и добавить класс CSS в пролете. Что-то вроде этого:

document.getElementById(i).innerHTML = weekday + " " + date + " <span class='underline'>" + month + "</span> " + year; 

И ассоциированная CSS:

span.underline { text-decoration: underline; } 

Вот jsFiddle>http://jsfiddle.net/vuS4B/1/