强调innerHTML的一部分

时间:2012-04-01 14:35:42

标签: javascript css innerhtml

我正在建立一个显示未来10天日期的表格。我需要在表格中插入日期,日期,月份和年份。我正在使用此JavaScript代码:

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

我的问题:

我想强调月份,但不是其他值。 我该如何解决这个问题?我已经尝试过提供一个CSS类和变量,但是我一直都很努力。

如果需要更多详细信息或代码,请询问。这是我第一次在这里发帖,只有javascripting一个月左右。

4 个答案:

答案 0 :(得分:0)

不是优雅的解决方案,但只是起作用:

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

答案 1 :(得分:0)

为什么不给它标记,因为innerHTML意味着你可以把html放在那里。

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

我刚使用了下划线标签:)

答案 2 :(得分:0)

您可以使用HTML <u>标记来实现此目的。例如:

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

这是使用上述方法的示例&gt; 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&gt; http://jsfiddle.net/vuS4B/1/

答案 3 :(得分:0)

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

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

风格

.month { text-decoration: underline; }

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

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