如何从材料 UI 选择中删除下划线 - JavaScript

在材料 UI 中，许多按钮和链接带有下划线，这是为了表明它们可以被点击。但是在某些情况下，您可能需要删除这些下划线。以下是如何从材料 UI 选择中删除下划线的步骤。

使用CSS

您可以使用CSS将文本装饰设置为“none”来删除链接中的下划线。在您的CSS文件中添加以下代码即可：

a {
  text-decoration: none;
}

这将从所有链接中删除下划线。如果您只想从特定链接中删除下划线，则可以使用选择器来指定该链接。例如，要从所有带有类名“my-link”的链接中删除下划线，请使用以下代码：

.my-link {
  text-decoration: none;
}

使用 JavaScript

如果您无法通过CSS将下划线删除，则可以使用 JavaScript。以下是如何使用 JavaScript 从材料 UI 选择中删除下划线的步骤。

使用 querySelectorAll()

您可以使用 querySelectorAll() 方法选择所有具有特定类名的元素，并使用 style.textDecoration = 'none' 将文本装饰设置为“none”来删除下划线。以下是代码示例：

var elems = document.querySelectorAll('.my-link');

for (var i = 0; i < elems.length; i++) {
  elems[i].style.textDecoration = 'none';
}

这将从所有具有类名“my-link”的元素中删除下划线。

使用类

如果您不想在每个链接上直接使用 querySelectorAll()，则可以创建一个类来删除下划线。以下是代码示例：

function removeUnderline(className) {
  var elems = document.querySelectorAll(className);

  for (var i = 0; i < elems.length; i++) {
    elems[i].style.textDecoration = 'none';
  }
}

// 调用方法，显示具有类名“my-link”的所有元素
removeUnderline('.my-link');

这个方法可以轻松地在整个应用程序中使用，只需调用该方法并提供要删除下划线的元素的类名即可。

结论

现在您已经知道如何从材料 UI 选择中删除下划线，您可以根据需要使用 CSS 或 JavaScript 实现这一点。如果您只需要从某些链接中删除下划线，则可以使用CSS选择器或JavaScript类来指定这些链接，而不是选择所有链接。