纯JS设置CSS display属性无效，如何实现选中文本时隐藏指定元素？

原代码的核心问题 #

• 选中状态判断错误：window.getSelection()返回的是Selection对象，不是字符串，直接和''比较永远不会成立，无法正确识别是否有文本选中。
• 元素操作错误：document.getElementsByClassName()返回的是HTMLCollection（类数组），不是单个DOM元素，不能直接调用setAttribute方法，必须遍历集合里的每个元素进行操作。

修复后的代码 #

document.addEventListener('click', function(){
  // 获取选中的文本内容，转为字符串后判断是否为空
  var selectedText = window.getSelection().toString().trim();
  // 获取所有目标元素
  var links = document.getElementsByClassName("linkAnnotation");

  // 遍历每个目标元素设置显示状态
  for(var i = 0; i < links.length; i++){
    links[i].style.display = selectedText ? 'none' : 'block';
  }
})

额外优化建议 #

可以改用document.querySelectorAll('.linkAnnotation')获取元素，它返回NodeList，支持用forEach遍历，代码更简洁：

document.addEventListener('click', function(){
  var selectedText = window.getSelection().toString().trim();
  var links = document.querySelectorAll('.linkAnnotation');
  
  links.forEach(link => {
    link.style.display = selectedText ? 'none' : 'block';
  });
})

内容的提问来源于stack exchange，提问作者giamburrasca