下划线部分innerHTML

我正在建立一个表格，显示接下来10天的日期。我需要在表格中插入日期，日期，月份和年份。我使用这个JavaScript代码如下：下划线部分innerHTML

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

我的问题：

我想强调的月份，而不是其他的值。我该如何解决这个问题？我已经试着给变量提供一个CSS类，但是我一直很失败。

如果需要更多的细节或代码，请询问。这是我第一次在这里发布，只有一个月左右的javascripting。

来源

2012-04-01 Crimson

你想使用一个CSS类赋予意义的元件部分和它的风格。用给定的类将其包装在<span>中，然后通过样式表应用样式。

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

风格

.month { text-decoration: underline; }

使用语义类，而不是特定的标签或内嵌样式，让你轻松改变在全球范围内这种类型的显示风格，而不是更新造型发生的每个地方。

编辑：很明显，你最了解你的应用程序，但我会避免强调，除了链接或公约规定（如某些标题），应该使用。由于在浏览器中强调通常表明某件事是可点击的链接，因此用户可能会感到非常困惑。这似乎不是你要去的地方，但我可能是错的。

来源

2012-04-01 14:44:35 tvanfosson

不完美的解决方案，但只是工作：

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

来源

2012-04-01 14:37:54 MarcinJuraszek

内联样式？真？我猜想，如果它是一个定义明确的语义的插件，也许，但如果可能的话，即使在这种情况下，我也会采用基于类的方法。 – tvanfosson 2012-04-01 14:51:59

为什么你不给它的标记，因为innerHTML的暗示，你可以把HTML那里。

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

我只是用下划线标记:)

来源

2012-04-01 14:38:14 scartag

这就是我试图拉开并失败，现在我看到我把标签放在错误的地方。我试过它：“+ 月。非常感谢:) – Crimson 2012-04-01 14:41:59

我相信''标签已被弃用，即你不应该使用它。 – tvanfosson 2012-04-01 14:56:08

您可以使用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/

来源

2012-04-01 14:41:49 BenM

我（很明显，请参阅我的答案）喜欢使用类方法，但它应该是语义的，传达了元素是什么，而不是应该应用什么样式。如果稍后您决定将月份名称改为斜体，则必须返回并更改所申请的课程，而不是简单地更改应用于月份名称的课程类型。 – tvanfosson 2012-04-01 14:47:27

完美，非常感谢！ – Crimson 2012-04-01 14:50:54

下划线部分innerHTML

回答

相关问题