javascript - innerHTML 的下划线部分

Question

我正在构建一个显示 future 10 天日期的表格。我需要在表中插入日期、月份和年份。我为此使用了这段 JavaScript 代码:

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

我的问题:

我想强调月份，而不是其他值。我该如何解决这个问题？我已经尝试提供一个 CSS 类和变量，但我总是失败得很厉害。

如果需要更多详细信息或代码，请询问。这是我第一次在这里发帖，只使用了一个月左右的 JavaScript。

Answer 1

您确实希望使用 CSS 类来赋予元素的该部分含义并为其设置样式。将其包裹在 <span> 中使用给定的类，然后通过样式表应用样式。

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

风格

.month { text-decoration: underline; }

使用语义类而不是特定标记或内联样式，您可以在全局范围内轻松更改此类显示的样式，而不必更新出现样式的每个单独位置。

编辑:显然您最了解您的应用程序，但我会避免在链接或约定规定(如某些标题)应该使用它的地方加下划线。这对用户来说可能会非常困惑，因为浏览器中的下划线通常表示某些东西是可点击的链接。这似乎不是您想要的，但我可能是错的。