Unterstrich Teil von innerHTML

Question

Ich baue eine Tabelle, die die Daten der nächsten 10 Tage anzeigt. Ich muss den Tag, das Datum, den Monat und das Jahr in die Tabelle einfügen. Ich verwende diesen JavaScript-Code für diese:

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

Mein Problem:

Ich möchte den Monat zu unterstreichen, aber nicht die anderen Werte. Wie kann ich das reparieren? Ich habe bereits versucht, eine CSS-Klasse zusammen mit der Variable zu geben, aber ich scheitere immer sehr schwer.

Wenn weitere Details oder Code benötigt werden, fragen Sie bitte. Dies ist mein erstes Mal hier und nur Javascripting für einen Monat oder so.

Answer 1

Sie wollen eine CSS-Klasse verwenden, um den Teil des Elements einen Sinn zu geben und Stil es. Wickeln Sie es in eine <span> mit der angegebenen Klasse und wenden Sie die Stile dann über Ihr Stylesheet an.

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

Stil

.month { text-decoration: underline; } 

eine semantische Klasse verwenden, anstatt einem bestimmten Tag oder Inline-Styles, können Sie ganz einfach den Stil dieser Art der Darstellung eher auf globaler Basis ändern, als aktualisieren zu müssen jeder einzelne Ort, an dem das Styling stattfindet.

EDIT: Offensichtlich kennen Sie Ihre Anwendung am besten, aber ich würde Unterstreichungen vermeiden, außer für Links oder wo Konvention diktiert (wie einige Titel), dass es verwendet werden sollte. Es kann für einen Benutzer sehr verwirrend sein, da die Unterstreichung in einem Browser typischerweise anzeigt, dass etwas ein anklickbarer Link ist. Das scheint nicht das zu sein, was Sie hier vorhaben, aber ich könnte mich irren.

Answer 2

Nicht elegante Lösung, aber nur funktioniert:

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

Answer 3

Warum gehst du nicht einfach geben sie Markup seit innerHTML- bedeutet, dass Sie HTML dort setzen können.

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

habe ich nur einen Unterstrich-Tag :)

Answer 4

Sie dies erreichen können den HTML-<u>-Tag. Zum Beispiel:

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

Hier ist ein Beispiel das obige Verfahren unter Verwendung von>http://jsfiddle.net/vuS4B/

Aber es könnte besser sein, dass Sie dies mit einem <span> Element zu tun, und eine CSS-Klasse auf die Spanne hinzufügen. Etwas wie folgt aus:

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

und die dazugehörige CSS:

span.underline { text-decoration: underline; } 

Hier ist der jsFiddle>http://jsfiddle.net/vuS4B/1/