从DOM中移除元素后如何重新显示？实现按H键切换聊天框显隐的脚本问题

数据老陈

2026-10-4

解决方案

你现在的实现存在两个核心问题：

调用remove()方法后元素会直接从DOM树中永久删除，没有内置方法可以直接恢复，除非你提前存储元素副本或者手动重构整个元素，实现成本很高，完全没必要用remove做显示隐藏切换
代码中isToggled的赋值逻辑存在错误：你在函数内部又用var重复声明了该变量，相当于创建了局部变量覆盖了全局状态变量，切换逻辑根本无法生效

推荐你改用控制元素CSS显示属性的方案实现需求，优化后的完整代码如下：

// ==UserScript==
// @name         Cytos Additions
// @namespace    http://tampermonkey.net/
// @match        https://cytos.io/
// @grant        none
// ==/UserScript==

var isToggled = false;
// 提前缓存聊天框元素，避免重复查询DOM
var chatBox = document.getElementsByClassName('_1FlWeEtrJKCnvzX-Y50CLP')[0];

function doc_keyUp(e) {
  // 兼容不同浏览器的按键属性，keyCode已经被弃用，优先用key判断
  if (e.key.toLowerCase() === 'h' || e.keyCode === 72) {
    // 先判断元素是否存在，避免页面未加载完成时报错
    if (!chatBox) return;
    if (isToggled) {
      // 恢复聊天框显示
      chatBox.style.display = 'block';
    } else {
      // 隐藏聊天框，元素不会从DOM中移除
      chatBox.style.display = 'none';
    }
    // 翻转状态变量，不要重复用var声明
    isToggled = !isToggled;
  }
}

document.addEventListener('keyup', doc_keyUp, false);