подчеркните часть innerHTML

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; }

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

РЕДАКТИРОВАТЬ: Очевидно, вы знаетеВаше приложение лучше, но я бы не стал подчеркивать, за исключением ссылок или там, где соглашение предписывает (например, некоторые заголовки), что его следует использовать.Это может быть очень запутанным для пользователя, поскольку подчеркивание в браузере, как правило, говорит о том, что что-то является ссылкой, на которую можно нажать.Кажется, это не то, что вы собираетесь здесь, но я могу ошибаться.

Answer 2

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

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

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

Answer 3

Этого можно добиться с помощью тега 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/

Answer 4

Не элегантное решение, а просто работает:

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