单击按钮时，如何为网站上的所有链接添加下划线？

Question

在创建一个简单的脚本经过一个小时的反复试验后，我向您寻求帮助。我想创建一个button，单击它后会为网站上的所有a 选择器添加下划线样式。我已经写了一个简单的函数，但不幸的是它不起作用。 整页有大量a选择器，整页代码我就不发了。

JS 文件：

function underlineLinks() {
  const links = document.querySelectorAll("a");
  links.style.textDecoration = "underline";
}

HTML 代码：

<button onclick="underlineLinks()">Underline</button>

functions.php 文件中的 PHP 代码：

function underline_links() {
  wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/js/underline.js');
}
add_action('wp_enqueue_scripts', 'underline_links');

Answer 1

并没有真正解释手头问题的原因，但这里已经有足够多的了。

对整个文档或正文使用 css 似乎比单独循环遍历每个元素更简单。

window.onload = function(){
  document.getElementById('on').onclick = function(){
    document.body.classList.add('underline');
  };
  
  document.getElementById('off').onclick = function(){
    document.body.classList.remove('underline');
  }
}

a{text-decoration: none}
body.underline a{text-decoration: underline}

<a>link 1</a>
<a>link 2</a>
<a>link 3</a>

<button id = 'on'>on</button>
<button id = 'off'>off</button>

一般来说，我会尽量避免使用 HTMLElements 的 style 属性，而是尝试使用类/属性。

按要求编辑：

a{text-decoration: none}
body.underline a{text-decoration: underline}

<a>link 1</a>
<a>link 2</a>
<a>link 3</a>

<button onclick = "document.body.classList.toggle('underline')">toggle</button>

Answer 2

您正在尝试将内联样式添加到从 .querySelectorAll() 返回的链接集合中。但是该集合没有style 属性。 而是在单击按钮时循环遍历集合中的所有链接并切换 CSS 类的使用。

// When the button is clicked...
document.querySelector("button").addEventListener("click", function(){
  // Find all the <a> elements and loop over the collection of them
  document.querySelectorAll("a").forEach(function(link){
    // Instead of working with inline styles (the style property),
    // just add or toggle the use of a pre-made CSS class. I'm using
    // toggle here, but if you just want the class added use .add("underline")
    // instead.
    link.classList.toggle("underline");
  });
});

a { text-decoration:none; }
.underline { text-decoration:underline; }

<a href="someURL">the text of the link</a> lorem ipsum <a href="someURL">the text of the link</a> lorem ipsum 2<a href="someURL">the text of the link</a> lorem ipsum 
<a href="someURL">the text of the link</a> lorem ipsum <a href="someURL">the text of the link</a> lorem ipsum <a href="someURL">the text of the link</a> lorem ipsum 
<a href="someURL">the text of the link</a> lorem ipsum 
<div>
  <button>Click to toggle underline</button>
</div>