如何编写Tampermonkey脚本将指定div的class从hide替换为show

嘿，完全理解你的困扰！这种不常用的小脚本确实容易卡壳，不过别担心，我来给你写一个简单的Tampermonkey脚本，完美实现你要的效果——把那个带hide类的库存div换成show类，让它默认显示出来。

基础版脚本（元素已提前加载） #

这个版本适用于页面加载时目标div已经存在的情况，直接找到元素修改类名就行：

// ==UserScript==
// @name         自动显示库存区域
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将指定库存div的hide类替换为show类，默认显示库存
// @author       你自己的名字（可选）
// @match        https://目标网站的完整URL/*  // 这里一定要替换成你要操作的网站地址，比如https://www.example.com/products/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 通过ID定位目标div
    const inventoryDiv = document.getElementById('ProductInventory-7122324111111');
    
    if (inventoryDiv) {
        // 移除hide类，添加show类
        inventoryDiv.classList.remove('hide');
        inventoryDiv.classList.add('show');
        console.log('库存区域已成功显示');
    } else {
        console.log('没找到目标库存div，检查下ID是不是写错啦');
    }
})();

关键注意事项 #

• 一定要把@match后面的URL替换成你实际要操作的网站地址，比如网站的产品页通用路径，这样脚本才会在正确的页面运行。
• 用classList方法修改类名比直接替换整个class属性更稳妥，因为如果这个div还有其他类名，不会被误删。

进阶版脚本（兼容动态加载的元素） #

如果目标div是页面加载后才动态生成的（比如通过AJAX加载），基础版可能找不到元素，这时候用MutationObserver监听DOM变化，确保元素出现后立即处理：

// ==UserScript==
// @name         自动显示库存区域（动态加载兼容）
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  兼容动态加载场景，自动显示指定库存div
// @author       你自己的名字（可选）
// @match        https://目标网站的完整URL/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 定义处理函数：找到元素并修改类名
    function showInventory() {
        const inventoryDiv = document.getElementById('ProductInventory-7122324111111');
        if (inventoryDiv) {
            inventoryDiv.classList.remove('hide');
            inventoryDiv.classList.add('show');
            console.log('库存区域已成功显示');
            // 找到元素后就停止监听，节省资源
            observer.disconnect();
        }
    }

    // 页面加载后先尝试找一次元素
    showInventory();

    // 创建DOM变化监听器
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            showInventory();
        });
    });

    // 监听整个页面的DOM子节点变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

使用的时候，把脚本复制到Tampermonkey的新建脚本里，替换好@match的URL，保存后刷新目标页面就能看到效果啦！

备注：内容来源于stack exchange，提问作者artvandelay