如何使用JavaScript添加虚线下划线

我有一个HTML文件，它有一个修改过的样式，这样下划线标记就会产生一条虚线

<style type="text/css">
  u {    
     border-bottom: 1px dashed #999;
     text-decoration: none;
  }
</style>

u{
边框底部：1px虚线#999；
文字装饰：无；
}

我想要一个能按类查找元素并应用下划线样式的函数。它需要在JS函数中，因为下划线只在某些事件（mouseover和onclick）中出现。我的javascript代码会是什么样子

到目前为止，我已经：

    function underline(id){
    var elements = document.getElementsByClassName(id);
    for(var i=0; i<elements.length; i++){
        elements[i].style.?????}
    }

函数下划线（id）{
var elements=document.getElementsByClassName（id）；
对于（var i=0；i为什么需要通过javascript完成？您可以使用：

为什么需要通过javascript完成？您可以使用：

您可以使用以下选项：

element.style.borderBottom = '2px dotted black';


如果要使“下划线”的宽度与文本的宽度匹配，可以添加以下内容：

element.style.display = 'inline';

您可以使用以下选项：

element.style.borderBottom = '2px dotted black';


如果要使“下划线”的宽度与文本的宽度匹配，可以添加以下内容：

element.style.display = 'inline';

仅供参考，
标记是非语义的。
此外，如果使用类应用样式，css选择器将更有用：

.underline{
    border-bottom: 1px dashed #999;
    text-decoration: none;
}

因此，您的html可以是：

<p>Blah blah <span class="underline">underline this</span> blah blah.</p>

诸如此类的废话在这些废话下面划下划线

仅供参考，
标记是非语义的。
此外，如果使用类应用样式，css选择器将更有用：

.underline{
    border-bottom: 1px dashed #999;
    text-decoration: none;
}

因此，您的html可以是：

<p>Blah blah <span class="underline">underline this</span> blah blah.</p>

诸如此类的废话在这些废话下面划下划线

所以我甚至不需要在标题中更改样式？@jcoat不，你不需要。制作“下划线”的javascript方法是使用
元素.style.borderBottom
，这会在底部创建一个边框，达到你想要的效果。你还可以将
元素.style.display
设置为
内联
并使下划线的宽度与元素的文本相匹配。我还更新了示例，以显示它可以与多个元素一起工作：），因此我甚至不需要在标题中更改样式？@jcoat否您不会。用于生成“下划线”的javascript方法将使用
element.style.borderBottom
，这将在底部创建一个边框，达到您想要的效果。您还可以将
element.style.display
设置为
“内联”
并使下划线的宽度与元素的文本相匹配。我还更新了示例，以显示它适用于多个元素：）我只希望类在某些特定位置加下划线events@jcoat您可以在这些事件期间将类添加到特定元素中，最好将样式与JavaScript分离，并将其保留在CS中正如@sweetamilyse所说的，只有活动期间的类。我只希望在某些events@jcoat您可以在这些事件期间将类添加到特定元素中。最好将样式与JavaScript分离，并将其保存在CSS文件中。正如@sweetammase所说，事件期间只添加类。