如何修改Vanilla JS代码实现按钮初始inline-block的显示控制

1. 调整按钮初始CSS样式 #

将按钮的默认显示方式从display:none改为inline-block，确保页面加载时按钮默认可见：

#find-require-button {
  display: inline-block;
  /* 保留你原有按钮的其他样式，比如padding、颜色等 */
}

2. 修改JavaScript逻辑 #

更新DOM加载完成后的检测逻辑，仅根据目标消息是否存在来控制按钮的显示/隐藏：

document.addEventListener('DOMContentLoaded', function() {
  // 获取需要检测的目标消息元素
  const targetMessage = document.querySelector('.message.requestedReply');
  // 获取控制按钮
  const findButton = document.getElementById('find-require-button');

  if (targetMessage) {
    // 存在目标消息，保持按钮显示（显式设置避免其他样式干扰）
    findButton.style.display = 'inline-block';
    // 如果你需要保留原逻辑的滚动到目标消息功能，取消下面一行的注释：
    // targetMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
  } else {
    // 不存在目标消息，隐藏按钮
    findButton.style.display = 'none';
    // 原逻辑的弹窗提示如果不需要可以删除，若需要则取消下面一行的注释：
    // alert('未找到需要回复的消息');
  }
});

修改说明 #

• 移除了原逻辑中“找到消息时切换按钮为block”的操作，适配新的初始inline-block样式
• 简化了判断逻辑：仅通过目标消息的存在状态控制按钮显示，无需额外弹窗（按需保留）
• 可选保留原有的滚动到目标消息功能，根据业务需求决定是否启用

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