求助：如何编写修改指定元素的TamperMonkey脚本？现有脚本仅首行生效

嘿，我完全理解你花了好几小时折腾TamperMonkey却只有第一行代码生效的挫败感——这个问题其实是JS基础里的一个常见小坑，咱们一步步解决它，顺便把编写这类脚本的正确方法捋清楚。

你的脚本失效的核心原因 #

你写的代码里，第一行document.getElementsByClassName("loginPanelTitle")[0]获取到了目标元素，然后调用.style.display="flex"是生效的，但后面的.style.opacity等等，相当于你没有再指定要修改的元素，直接在调用一个“无主”的style属性，自然不会起作用。简单说：只有第一行的style是绑定到目标元素上的，后面的都没绑定。

两种修复方案 #

方案1：把元素存储到变量（最直观，易维护） #

先把获取到的元素存到一个变量里，之后所有的样式修改都针对这个变量操作，同时注意一个细节：CSS里带短横线的属性（比如align-items、font-size），在JS的style对象里要改成驼峰命名（alignItems、fontSize），这是JS操作DOM样式的规则。

// 先获取元素并存入变量
const loginPanelTitle = document.getElementsByClassName("loginPanelTitle")[0];

// 依次修改样式，所有操作都指向同一个元素
loginPanelTitle.style.display = "flex";
loginPanelTitle.style.opacity = "0.5";
loginPanelTitle.style.alignItems = "center";
loginPanelTitle.style.padding = "4px 8px";
loginPanelTitle.style.fontSize = "24px";
loginPanelTitle.style.backgroundColor = "#000000";
loginPanelTitle.style.borderRadius = "2px 2px"; // 补全你没写完的属性值

方案2：用Object.assign批量赋值（更简洁） #

如果要修改的样式很多，用Object.assign可以一次性把所有样式属性批量赋值给元素的style对象，代码更紧凑：

const loginPanelTitle = document.getElementsByClassName("loginPanelTitle")[0];
// 批量设置样式
Object.assign(loginPanelTitle.style, {
  display: "flex",
  opacity: "0.5",
  alignItems: "center",
  padding: "4px 8px",
  fontSize: "24px",
  backgroundColor: "#000000",
  borderRadius: "2px 2px"
});

完整的TamperMonkey脚本模板 #

光写核心代码还不够，咱们把它包装成标准的TamperMonkey脚本，确保能在目标网站正常运行：

// ==UserScript==
// @name         自定义登录面板标题样式
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改指定登录面板标题的样式
// @author       你自己的名字
// @match        https://你的目标网站域名/*  // 替换成你要修改的网站URL，比如https://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待元素加载完成（如果元素是动态渲染的，可能需要这个）
    setTimeout(() => {
        const loginPanelTitle = document.getElementsByClassName("loginPanelTitle")[0];
        // 先判断元素是否存在，避免报错
        if (loginPanelTitle) {
            Object.assign(loginPanelTitle.style, {
                display: "flex",
                opacity: "0.5",
                alignItems: "center",
                padding: "4px 8px",
                fontSize: "24px",
                backgroundColor: "#000000",
                borderRadius: "2px 2px"
            });
        }
    }, 1000); // 延迟1秒执行，确保元素已加载，可根据实际情况调整时间
})();

关键注意事项 #

• @match必须正确：脚本只会在匹配的网站上运行，一定要把模板里的URL替换成你要修改的网站地址。
• 元素加载时机：如果目标元素是页面动态生成的（比如通过AJAX加载），直接获取可能拿不到，这时候可以用setTimeout延迟执行，或者用MutationObserver监听元素出现（更优雅的方式，适合复杂场景）。
• 元素存在性判断：添加if (loginPanelTitle)可以避免元素不存在时脚本抛出错误，让脚本更健壮。

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