innerHTML的下划线部分

underline part of innerHTML

本文关键字：下划线部 innerHTML      更新时间：2023-09-26

我正在构建一个表，显示未来10天的日期。我需要在表格中插入日期、月份和年份。我使用这个JavaScript代码：

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

我的问题：

我想强调月份，但不想强调其他价值观。我该怎么修这个？我已经试着给一个CSS类和变量，但我一直很失败。

如果需要更多详细信息或代码，请询问。这是我第一次在这里发布java脚本，一个月左右

您确实希望使用CSS类来赋予元素的该部分含义并对其进行样式设置。将其与给定的类一起封装在<span>中，然后通过样式表应用样式。

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

样式

.month { text-decoration: underline; }

使用语义类，而不是特定的标记或内联样式，可以在全局的基础上轻松地更改这种类型的显示的样式，而不必更新出现样式的每个单独位置。

编辑：很明显，您最了解您的应用程序，但我会避免下划线，除非链接或约定（如某些标题）要求使用它。这可能会让用户非常困惑，因为浏览器中的下划线通常表示某个内容是可点击的链接。这似乎不是你想要的，但我可能错了。

不是一个优雅的解决方案，但很有效：

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

既然innerHTML意味着你可以把html放在那里，为什么不直接给它标记呢。

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

我刚刚使用了一个下划线标签：）

您可以使用HTML <u>标记来实现这一点。例如：

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

以下是使用上述方法的示例>http://jsfiddle.net/vuS4B/

但最好使用<span>元素，并在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/

相关文章：