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

Question

我有一个具有修改样式的 HTML 文件，以便下划线标记产生虚线。

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

我想要一个按类查找元素并应用此下划线样式的函数。它需要在 JS 函数中，因为下划线仅在某些事件（鼠标悬停和点击）期间发生。我的 javascript 代码会是什么样子？

到目前为止，我有：

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

Answer 1

你可以使用这个：

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

查看示例

如果你想让“下划线”的宽度与文本的宽度相匹配，你可以添加：

element.style.display = 'inline';

Answer 2

为什么需要通过javascript完成？您可以只使用css 类选择器：

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

Answer 3

仅供参考，<u>标签是非语义的。此外，如果您使用 class 来应用样式，您的 css 选择器会更有用：

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

所以你的html可能是：

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