篡改猴脚本修改页面元素样式

### 如何使用 GreaseMonkey 脚本修改网页元素的 CSS 样式 通过 GreaseMonkey 或 Tampermonkey 插件，可以轻松实现对网页元素样式的自定义调整。以下是具体方法： #### 创建并加载脚本 首先，在浏览器中安装好 Tampermonkey 或 Greasemonkey 扩展后，新建一个用户脚本文件。该文件通常以 `.user.js` 结尾。 #### 修改网页样式的核心函数 核心功能可以通过 `GM_addStyle()` 方法来完成，此方法允许动态向页面注入新的 CSS 样式[^1]。 下面是一个完整的例子，展示如何利用脚本更改特定网页上的文字颜色和字体大小： ```javascript // ==UserScript== // @name 自定义CSS样式示例 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 尝试用Tampermonkey修改网站样式 // @author Anon // @match *://*/* // @grant GM_addStyle // ==/UserScript== (function() { 'use strict'; // 定义要添加到目标站点的新CSS规则 const customCss = ` body { background-color: lightblue !important; } h1 { color: darkred !important; text-transform: uppercase; } p { font-family: Arial, sans-serif; font-size: 18px; line-height: 1.6em; } `; // 使用GM_addStyle将上述CSS应用至当前文档 GM_addStyle(customCss); })(); ``` 以上代码会改变匹配的所有网页背景色为浅蓝色，并设置 `<h1>` 和 `<p>` 元素的不同显示效果。 注意：如果某些样式未生效，请确认是否需要加入 `!important` 来提高优先级覆盖原有样式。 #### 动态创建HTML结构与绑定样式 除了单纯地增加全局或局部CSS外，还可以先构建一段全新的DOM节点再附加相应外观修饰。例如前面提到过的 `createHTML()` 函数可能负责生成额外的内容区块，之后调用 `addStyle()` 给这些新组件指定专属视觉特征。 ```javascript function createHTML(){ var newDiv = document.createElement('div'); newDiv.className='wrap'; var heading = document.createElement('h1'); heading.textContent="欢迎访问"; heading.className='h1'; var description = document.createElement('span'); description.textContent="这里是描述信息."; description.className='des'; newDiv.appendChild(heading); newDiv.appendChild(description); document.body.insertBefore(newDiv,document.body.firstChild); } ``` 最后提醒一下开发者们务必合理运用此类技术手段尊重原作者版权以及遵循各平台的服务条款规定。