如何通过Tampermonkey点击按钮切换指定div的display样式

直接用下面的完整脚本，按步骤操作就能实现需求：

// ==UserScript==
// @name         切换弹窗遮罩显示状态
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  一键切换指定class的遮罩层显示/隐藏
// @match        https://你的目标网站域名/*  // 替换成你要操作的网站地址
// @grant        GM_addStyle
// ==/UserScript==

// 给切换按钮加样式，固定在页面右上角
GM_addStyle(`
  .toggle-dimmer-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 99999; /* 确保按钮在所有元素最上层 */
    font-size: 14px;
  }
  .toggle-dimmer-btn:hover {
    background: #45a049;
  }
`);

// 核心切换逻辑
function toggleDimmer() {
  // 定位目标div（通过你提供的完整class）
  const dimmer = document.querySelector('div.ui.page.modals.dimmer.transition.visible.active');
  if (!dimmer) {
    alert('当前页面没找到目标遮罩层');
    return;
  }
  
  // 判断当前显示状态，切换display属性（强制!important优先级）
  const currentDisplay = dimmer.style.display;
  if (currentDisplay === 'none' || currentDisplay === '') {
    dimmer.style.setProperty('display', 'flex', 'important');
  } else {
    dimmer.style.setProperty('display', 'none', 'important');
  }
}

// 创建切换按钮并添加到页面
const toggleBtn = document.createElement('button');
toggleBtn.textContent = '切换遮罩';
toggleBtn.className = 'toggle-dimmer-btn';
toggleBtn.addEventListener('click', toggleDimmer);
document.body.appendChild(toggleBtn);

操作步骤： #

1. 打开Tampermonkey插件，点击「新建脚本」
2. 删除默认代码，粘贴上面的完整脚本
3. 修改脚本里的@match行，把网址替换成你要处理的网站（比如https://xxx.com/*）
4. 按Ctrl+S保存脚本
5. 刷新目标网站页面，右上角会出现绿色的「切换遮罩」按钮，点击就能循环切换该div的显示/隐藏

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